{{define "arrivals"}}
<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">Arrival List</h2>
  <div class="flex items-center gap-3">
    {{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}}
    <button onclick="openPatientsModal()"
      class="text-xs font-medium text-brand-500 hover:text-brand-700 transition-colors">
      Lihat selengkapnya
    </button>
  </div>
</div>
{{if .Rows}}
<ul class="divide-y divide-slate-50 px-3 py-2">
  {{range .Rows}}
  <li class="arrival-row flex items-center gap-3 rounded-xl px-2 py-2.5 transition-colors hover:bg-slate-50"
    data-arrival-key="{{.Name}}|{{.Date}}|{{.InTime}}|{{.Station}}">
    <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-brand-50 text-xs font-bold text-brand-600">
      {{.Name | initials}}
    </div>
    <div class="min-w-0 flex-1">
      <p class="truncate text-sm font-medium text-slate-800">{{.Name}}</p>
      <p class="text-xs text-slate-400">
        <span class="num">{{fmtDateTime .Date .InTime}}</span> &bull; {{.Station | stationShort}}
      </p>
    </div>
  </li>
  {{end}}
</ul>
{{else}}
<div class="px-5 py-8 text-center text-sm text-slate-400">
  Belum ada arrival pada tanggal ini.
</div>
{{end}}
{{end}}