{{define "repo_size_chart"}}
{{$trend := .Page}}
<div id="repo-trend-chart" data-range="{{$trend.Range}}">
  <div class="flex items-center gap-2 mb-2">
    <span class="text-xs text-ink-mid">Range:</span>
    <a class="btn btn-ghost-xs {{if eq "30d" $trend.Range}}is-active{{end}}"
       hx-get="/hosts/{{$trend.HostID}}/repo/trend?range=30d"
       hx-target="#repo-trend-chart" hx-swap="outerHTML">30d</a>
    <a class="btn btn-ghost-xs {{if eq "90d" $trend.Range}}is-active{{end}}"
       hx-get="/hosts/{{$trend.HostID}}/repo/trend?range=90d"
       hx-target="#repo-trend-chart" hx-swap="outerHTML">90d</a>
    <a class="btn btn-ghost-xs {{if eq "1y" $trend.Range}}is-active{{end}}"
       hx-get="/hosts/{{$trend.HostID}}/repo/trend?range=1y"
       hx-target="#repo-trend-chart" hx-swap="outerHTML">1y</a>
  </div>
  <div class="text-ink">{{$trend.ChartSVG}}</div>
  <div class="flex gap-4 mt-2 text-xs text-ink-mid">
    <span><span class="inline-block w-3 h-[2px] align-middle" style="background:#3b82f6"></span> repo size</span>
    <span><span class="inline-block w-3 h-[2px] align-middle" style="background:#f59e0b"></span> snapshot count</span>
  </div>
</div>
{{end}}