{{define "stations"}}
<div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
  <h2 class="text-sm font-semibold text-slate-700">Station Status</h2>
  {{if .IsLive}}
  <span class="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
    <span class="live-dot h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Live
  </span>
  {{end}}
</div>
{{if .Rows}}
<div class="overflow-x-auto p-3">
  <table class="min-w-full text-sm md:table-fixed">
    <thead>
      <tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-400">
        <th class="px-3 py-2">Station</th>
        <th class="hidden px-3 py-2 text-right sm:table-cell">Sudah</th>
        <th class="px-3 py-2 text-right">Belum</th>
        <th class="px-3 py-2 text-right">Total</th>
        <th class="px-3 py-2 sm:w-40">Progress</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-50">
      {{range .Rows}}
      <tr class="station-row hover:bg-slate-50 transition-colors"
        data-station-key="{{.Station | stationShort}}"
        data-processed="{{.Processed}}"
        data-pending="{{.Pending}}"
        data-total="{{.Total}}">
        <td class="px-3 py-2.5 font-medium text-slate-700">
          {{.Station | stationShort}}
        </td>
        <td class="num hidden px-3 py-2.5 text-right font-semibold text-slate-900 sm:table-cell">{{.Processed}}</td>
        <td class="num px-3 py-2.5 text-right text-amber-600">{{.Pending}}</td>
        <td class="num px-3 py-2.5 text-right text-slate-400">{{.Total}}</td>
        <td class="px-3 py-2.5">
          <div class="flex items-center gap-2">
            <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
              <div class="h-full rounded-full transition-all"
                style="width: {{printf "%.1f" .Pct}}%; background: {{if ge .Pct 90.0}}#10b981{{else if ge .Pct 60.0}}#3b50a0{{else}}#f59e0b{{end}}">
              </div>
            </div>
            <span class="num text-xs font-semibold {{if ge .Pct 90.0}}text-emerald-600{{else if ge .Pct 60.0}}text-brand-600{{else}}text-amber-600{{end}}">
              {{printf "%.0f%%" .Pct}}
            </span>
          </div>
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{else}}
<div class="px-5 py-8 text-center text-sm text-slate-400">
  Belum ada data station pada tanggal ini.
</div>
{{end}}
{{end}}