{{define "fitnessChart"}}
<section class="fitness-chart panel">
    <div class="fitness-chart-header row space-between">
        <span class="caption">{{.Title}}</span>
        <select class="input fitness-range" data-fitness-range="{{.Param}}" aria-label="{{.Title}} time range">
            {{range .Options}}<option value="{{.Value}}"{{if .Selected}} selected{{end}}>{{.Label}}</option>{{end}}
        </select>
    </div>
    {{if .Empty}}
    <p class="fitness-empty is-empty">No data in this range.</p>
    {{else}}
    <svg class="fitness-svg" viewBox="0 0 {{.ViewW}} {{.ViewH}}" role="img" aria-label="{{.Title}}">
        {{range .YTicks}}
        <line class="chart-grid" x1="{{$.PlotX}}" y1="{{.Pos}}" x2="{{$.PlotR}}" y2="{{.Pos}}"/>
        <text class="chart-label" x="{{$.YLabelX}}" y="{{.Pos}}" text-anchor="end" dominant-baseline="middle">{{.Label}}</text>
        {{end}}
        {{range .XTicks}}
        <text class="chart-label" x="{{.Pos}}" y="{{$.XLabelY}}" text-anchor="{{.Anchor}}">{{.Label}}</text>
        {{end}}
        <line class="chart-axis" x1="{{.PlotX}}" y1="{{.PlotY}}" x2="{{.PlotX}}" y2="{{.PlotB}}"/>
        <line class="chart-axis" x1="{{.PlotX}}" y1="{{.PlotB}}" x2="{{.PlotR}}" y2="{{.PlotB}}"/>
        {{range .Lines}}
        <polyline class="chart-line" points="{{.}}"/>
        {{end}}
        {{range .Dots}}
        <circle class="chart-dot" cx="{{.X}}" cy="{{.Y}}" r="2.5"><title>{{.Title}}</title></circle>
        {{end}}
        {{if .Goal}}
        <line class="chart-goal" x1="{{.PlotX}}" y1="{{.Goal.Y}}" x2="{{.PlotR}}" y2="{{.Goal.Y}}"/>
        <text class="chart-goal-label" x="{{.PlotR}}" y="{{.Goal.LabelY}}" text-anchor="end">{{.Goal.Label}}</text>
        {{end}}
    </svg>
    {{end}}
</section>
{{end}}
<div class="fitness-dash col">
{{if .Notice}}
    <p class="muted">{{.Notice}}</p>
{{else}}
    {{range .Charts}}{{template "fitnessChart" .}}{{end}}
{{end}}
</div>
<script src="/_/fitness/fitness.js"></script>