{{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 .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}}