{{define "partials/tab_crew.html"}}
<div class="flex justify-between items-center min-h-12 mb-6">
    <h1 class="text-2xl font-bold">Crew Management</h1>
    <div class="flex gap-2">
        {{if .Crew}}
        <a href="/admin/crew/export" class="btn btn-ghost btn-sm gap-2" title="Export crew to JSON">
            {{ icon "download" "size-4" }}
            Export
        </a>
        {{end}}
        <a href="/admin/crew/import" class="btn btn-ghost btn-sm gap-2" title="Import crew from JSON">
            {{ icon "upload" "size-4" }}
            Import
        </a>
        <a href="/admin/crew/add" class="btn btn-primary gap-2">
            {{ icon "user-plus" "size-4" }}
            Add Crew Member
        </a>
    </div>
</div>

{{if .StaleTiers}}
<div class="card bg-base-100 border border-warning/40 shadow-sm mb-6">
    <div class="card-body p-6">
        <div class="flex items-start gap-3 mb-4">
            <span class="text-warning mt-0.5" aria-hidden="true">{{ icon "triangle-alert" "size-5" }}</span>
            <div>
                <h2 class="font-semibold text-base">Tier reconciliation needed</h2>
                <p class="text-sm text-base-content/70 mt-1">
                    {{len .StaleTiers}} tier name{{if ne (len .StaleTiers) 1}}s{{end}} on crew records no longer exist in this hold's quota config. Affected crew fall back to the default tier at lookup time, but their stored tier name is stale. Pick a current tier to remap them.
                </p>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="table table-sm">
                <caption class="sr-only">Stale tier names</caption>
                <thead>
                    <tr>
                        <th scope="col">Stored tier name</th>
                        <th scope="col" class="text-right">Crew</th>
                        <th scope="col">Remap to</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    {{range .StaleTiers}}
                    <tr>
                        <td><code class="text-sm">{{.Name}}</code></td>
                        <td class="text-right tabular-nums">{{.Count}}</td>
                        <td colspan="2">
                            <form hx-post="/admin/crew/remap-tier"
                                  hx-target="#remap-status-{{.Name}}"
                                  hx-swap="innerHTML"
                                  class="flex gap-2 items-center">
                                {{ csrfInput $.CSRFToken }}
                                <input type="hidden" name="from" value="{{.Name}}">
                                <select name="to" required class="select select-bordered select-sm w-full max-w-xs">
                                    <option value="" disabled selected>Select tier…</option>
                                    {{range $.Tiers}}
                                    <option value="{{.Key}}">{{.Name}} ({{.Limit}})</option>
                                    {{end}}
                                </select>
                                <button type="submit" class="btn btn-warning btn-sm">Apply</button>
                            </form>
                            <div id="remap-status-{{.Name}}" class="mt-2"></div>
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
        <p class="text-xs text-base-content/50 mt-3">
            Tip: individual crew can also be remapped via the Edit action on their row below.
        </p>
    </div>
</div>
{{end}}

{{if .Crew}}
<div class="card bg-base-100 shadow-sm">
    <div class="overflow-x-auto">
        <table class="table table-zebra table-fixed">
            <caption class="sr-only">Crew members</caption>
            <colgroup>
                <col style="width: 22%">
                <col style="width: 10%">
                <col style="width: 18%">
                <col style="width: 14%">
                <col style="width: 16%">
                <col style="width: 12%">
                <col style="width: 8%">
            </colgroup>
            <thead>
                <tr>
                    <th scope="col">Member</th>
                    <th scope="col">Role</th>
                    <th scope="col">Permissions</th>
                    <th scope="col">Tier</th>
                    <th scope="col">Usage</th>
                    <th scope="col">Added</th>
                    <th scope="col" class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody id="crew-list">
                {{range .Crew}}
                <tr id="crew-{{.RKey}}"
                    hx-get="/admin/api/crew/member?rkey={{.RKey}}"
                    hx-trigger="load"
                    hx-swap="outerHTML"
                    aria-busy="true">
                    <td>
                        <div class="flex flex-col gap-0.5">
                            <span class="loading loading-spinner loading-xs" aria-hidden="true"></span>
                            <code class="text-xs text-base-content/50 font-mono truncate max-w-full" title="{{.DID}}">{{truncate .DID 32}}</code>
                        </div>
                    </td>
                    <td>{{.Role}}</td>
                    <td>
                        {{range .Permissions}}
                        <span class="badge badge-ghost badge-sm mr-1 mb-1">{{.}}</span>
                        {{end}}
                    </td>
                    <td>
                        <span class="badge badge-primary badge-sm">{{.Tier}}</span>
                        <br><small class="text-base-content/50">{{.TierLimit}}</small>
                    </td>
                    <td>
                        <div class="flex flex-col gap-1 min-w-24">
                            <span class="text-sm">{{.UsageHuman}}</span>
                            <progress class="progress {{if gt .UsagePercent 90}}progress-error{{else if gt .UsagePercent 75}}progress-warning{{else}}progress-primary{{end}} w-full" value="{{.UsagePercent}}" max="100" aria-label="Storage usage for {{if .Handle}}{{.Handle}}{{else}}{{.DID}}{{end}}: {{.UsagePercent}}%"></progress>
                            <small class="text-base-content/50">{{.UsagePercent}}%</small>
                        </div>
                    </td>
                    <td class="text-sm text-base-content/70">{{if .AddedAt.IsZero}}<span class="text-base-content/30">—</span>{{else}}{{formatTime .AddedAt}}{{end}}</td>
                    <td></td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>
{{else}}
<div role="status" aria-live="polite" class="text-center py-12 text-base-content/60">
    <p>No crew members yet. <a href="/admin/crew/add" class="link link-primary">Add your first crew member</a>.</p>
</div>
{{end}}
{{end}}