{{define "kpi"}}
<!-- Invited Staff -->
<article class="card border-l-4 border-l-brand-200 p-4">
  <div class="flex items-start justify-between">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Invited Staff</p>
    <svg class="h-4 w-4 text-brand-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A9.956 9.956 0 0112 15c2.2 0 4.236.711 5.879 1.915M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
    </svg>
  </div>
  <p class="num mt-3 text-3xl font-semibold text-slate-900">{{.InvitedStaff}}</p>
  <p class="mt-1 text-xs text-slate-400">Total staff undangan</p>
</article>

<!-- Total Staff -->
<article class="card border-l-4 border-l-brand-300 p-4">
  <div class="flex items-start justify-between">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Total Staff</p>
    <svg class="h-4 w-4 text-brand-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
    </svg>
  </div>
  <p class="num mt-3 text-3xl font-semibold text-slate-900">{{.TotalStaff}}</p>
  {{if gt .InvitedStaff 0}}
  <p class="mt-1 text-xs font-medium text-emerald-600">{{printf "%.1f%%" (pct .TotalStaff .InvitedStaff)}} dari invited</p>
  {{else}}
  <p class="mt-1 text-xs text-slate-400">Yang benar-benar datang</p>
  {{end}}
</article>

<!-- Checked In -->
<article class="kpi-card kpi-card-inprogress card border-l-4 border-l-brand-500 p-4" data-kpi-kind="inprogress" data-kpi-value="{{.CheckedIn}}">
  <div class="flex items-start justify-between">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">In Progress</p>
    <svg class="h-4 w-4 text-brand-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
  </div>
  <p class="num mt-3 text-3xl font-semibold text-slate-900">{{.CheckedIn}}</p>
  <p class="mt-1 text-xs text-slate-400">Masih dalam proses</p>
</article>

<!-- Checked Out -->
<article class="kpi-card kpi-card-checkedout card border-l-4 border-l-emerald-500 p-4" data-kpi-kind="checkedout" data-kpi-value="{{.CheckedOut}}">
  <div class="flex items-start justify-between">
    <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Checked Out</p>
    <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
    </svg>
  </div>
  <p class="num mt-3 text-3xl font-semibold text-slate-900">{{.CheckedOut}}</p>
  {{if gt .TotalStaff 0}}
  <p class="mt-1 text-xs text-slate-400">{{printf "%.1f%%" (pct .CheckedOut .TotalStaff)}} selesai</p>
  {{end}}
</article>
{{end}}