{{define "partials/tab_dashboard.html"}}
<div class="flex justify-between items-center min-h-12 mb-6">
    <h1 class="text-2xl font-bold">Dashboard</h1>
</div>

<div class="space-y-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="stats shadow bg-base-100">
            <div class="stat">
                <div class="stat-title">Crew Members</div>
                <div class="stat-value">{{.Stats.TotalCrewMembers}}</div>
            </div>
        </div>
        <div class="stats shadow bg-base-100" hx-get="/admin/api/stats" hx-trigger="load" hx-swap="innerHTML" aria-live="polite" aria-busy="true">
            <div class="stat">
                <div class="stat-title">Storage</div>
                <div class="stat-value text-base-content/30 italic text-lg">Loading...</div>
            </div>
        </div>
    </div>

    <div class="card bg-base-100 shadow-sm">
        <div class="card-body">
            <h2 class="card-title text-lg">Tier Distribution</h2>
            {{if .Stats.TierDistribution}}
            <div class="flex flex-col gap-2">
                {{/* TODO: sort tiers in handler (getDashboardStats) — Go map iteration is non-deterministic */}}
                {{range $tier, $count := .Stats.TierDistribution}}
                <div class="flex justify-between items-center p-3 bg-base-200 rounded-lg">
                    <span class="font-medium">{{$tier}}</span>
                    <span class="text-base-content/60">{{$count}} members</span>
                </div>
                {{end}}
            </div>
            {{else}}
            <p class="text-center py-6 text-base-content/60">No crew members yet.</p>
            {{end}}
        </div>
    </div>

    <div class="card bg-base-100 shadow-sm">
        <div class="card-body">
            <h2 class="card-title text-lg">Top Users by Storage</h2>
            <div hx-get="/admin/api/top-users?limit=10" hx-trigger="load" hx-swap="innerHTML" aria-live="polite" aria-busy="true">
                <p class="text-base-content/50 italic">Loading top users...</p>
            </div>
        </div>
    </div>
</div>
{{end}}