{{define "page-header"}}
<div class="flex justify-between items-center min-h-12 mb-6">
    <h1 class="text-2xl font-bold">Add Crew Member</h1>
    <a href="/admin#crew" class="btn btn-ghost gap-2">
        {{ icon "arrow-left" "size-4" }}
        Back to Crew
    </a>
</div>
{{end}}

{{define "page-content"}}
<div class="card bg-base-100 shadow-sm">
    <div class="card-body">
        <form action="/admin/crew/add" method="POST" class="max-w-lg">
            {{ csrfInput .CSRFToken }}
            <fieldset class="fieldset mb-6">
                <label class="fieldset-label font-medium" for="did">DID</label>
                <div class="join w-full">
                    <input type="text" id="did" name="did"
                           class="input input-bordered join-item flex-1"
                           placeholder="did:plc:..."
                           autocomplete="off"
                           inputmode="url"
                           required>
                    <button type="button" id="lookup-btn" class="btn btn-ghost join-item" title="Lookup handle" aria-label="Lookup handle from DID">
                        {{ icon "search" "size-4" }}
                    </button>
                </div>
                <span class="fieldset-label text-base-content/50">The member's ATProto DID</span>
                <div id="handle-result" class="mt-2"></div>
            </fieldset>

            <fieldset class="fieldset mb-6">
                <label class="fieldset-label font-medium" for="role">Role</label>
                <input type="text" id="role" name="role"
                       class="input input-bordered w-full"
                       placeholder="member" value="member"
                       autocomplete="off">
                <span class="fieldset-label text-base-content/50">Optional role name (e.g., member, admin)</span>
            </fieldset>

            <fieldset class="fieldset mb-6">
                <label class="fieldset-label font-medium">Permissions</label>
                <div class="flex flex-col gap-3 mt-2">
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" name="perm_read" class="checkbox checkbox-sm checkbox-primary mt-0.5" checked>
                        <span class="flex flex-col">
                            <span class="font-medium text-sm">blob:read</span>
                            <span class="text-xs text-base-content/50">Can pull/download blobs</span>
                        </span>
                    </label>
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" name="perm_write" class="checkbox checkbox-sm checkbox-primary mt-0.5" checked>
                        <span class="flex flex-col">
                            <span class="font-medium text-sm">blob:write</span>
                            <span class="text-xs text-base-content/50">Can push/upload blobs</span>
                        </span>
                    </label>
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" name="perm_admin" class="checkbox checkbox-sm checkbox-primary mt-0.5">
                        <span class="flex flex-col">
                            <span class="font-medium text-sm">crew:admin</span>
                            <span class="text-xs text-base-content/50">Can manage crew members</span>
                        </span>
                    </label>
                </div>
            </fieldset>

            {{if .Tiers}}
            <fieldset class="fieldset mb-6">
                <label class="fieldset-label font-medium" for="tier">Quota Tier</label>
                <select id="tier" name="tier" class="select select-bordered w-full">
                    {{range .Tiers}}
                    <option value="{{.Key}}">{{.Name}} ({{.Limit}})</option>
                    {{end}}
                </select>
                <span class="fieldset-label text-base-content/50">Storage quota limit for this member</span>
            </fieldset>
            {{end}}

            <div class="flex gap-3 mt-6">
                <button type="submit" class="btn btn-primary gap-2">
                    {{ icon "user-plus" "size-4" }}
                    Add Crew Member
                </button>
                <a href="/admin#crew" class="btn btn-ghost">Cancel</a>
            </div>
        </form>
    </div>
</div>
{{end}}