{{define "partials/crew_member_row.html"}}
<tr id="crew-{{.RKey}}">
    <td>
        <div class="flex flex-col gap-0.5">
            {{if .Handle}}<strong class="text-base-content">{{.Handle}}</strong>{{end}}
            <code class="text-xs text-base-content/50 font-mono truncate max-w-[24ch]" title="{{.DID}}">{{.DID}}</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>
        <div class="flex gap-1 justify-end">
            <a href="/admin/crew/{{.RKey}}" class="btn btn-ghost btn-sm btn-square" title="Edit" aria-label="Edit crew member {{if .Handle}}{{.Handle}}{{else}}{{.DID}}{{end}}">
                {{ icon "pencil" "size-4" }}
            </a>
            <button class="btn btn-error btn-ghost btn-sm btn-square" title="Delete" aria-label="Remove crew member {{if .Handle}}{{.Handle}}{{else}}{{.DID}}{{end}}" hx-post="/admin/crew/{{.RKey}}/delete" hx-confirm="Remove this crew member?" hx-target="#crew-{{.RKey}}" hx-swap="outerHTML">
                {{ icon "trash-2" "size-4" }}
            </button>
        </div>
    </td>
</tr>
{{end}}