at-container-registry/pkg/hold/admin/templates/partials/tab_crew.html

{{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">
            <thead>
                <tr>
                    <th>Member</th>
                    <th>Role</th>
                    <th>Permissions</th>
                    <th>Tier</th>
                    <th>Usage</th>
                    <th>Added</th>
                    <th class="text-right">Actions</th>
                </tr>
            </thead>
            <tbody id="crew-list">
                {{range .Crew}}
                <tr id="crew-{{.RKey}}">
                    <td>
                        <div>
                            {{if .Handle}}<strong class="text-base-content">{{.Handle}}</strong><br>{{end}}
                            <code class="text-xs text-base-content/50 break-all font-mono">{{.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"></progress>
                            <small class="text-base-content/50">{{.UsagePercent}}%</small>
                        </div>
                    </td>
                    <td class="text-sm text-base-content/70">{{formatTime .AddedAt}}</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}}
            </tbody>
        </table>
    </div>
</div>
{{else}}
<div 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}}