{{ define "content" }}
<div class="space-y-6">
    <header class="space-y-1">
        <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "admin.admin_panel" }}</h1>
        <p class="text-muted-foreground text-sm">{{ .locale.Tr "admin.invitations" }}</p>
    </header>

    <!-- Create invitation -->
    <section class="bg-card rounded-lg border">
        <div class="border-b px-4 py-3">
            <p class="text-muted-foreground text-sm italic">{{ .locale.Tr "admin.invitations.help" }}</p>
        </div>
        <form method="POST" class="space-y-4 p-4">
            {{ .csrfHtml }}
            <div class="flex flex-wrap gap-4">
                <div class="flex-1 space-y-1.5">
                    <label for="nbMax" class="text-sm font-medium">{{ .locale.Tr "admin.invitations.max_uses" }}</label>
                    <input type="number" id="nbMax" name="nbMax" value="10" min="1" max="100" class="input h-9 w-full" />
                </div>
                <div class="flex-1 space-y-1.5">
                    <label for="expiresAt" class="text-sm font-medium">{{ .locale.Tr "admin.invitations.expires_at" }}</label>
                    <input type="datetime-local" id="expiresAt" name="expiresAt" class="input h-9 w-full" />
                </div>
            </div>
            <div class="flex">
                <button type="submit" class="btn-sm">{{ .locale.Tr "admin.invitations.create" }}</button>
            </div>
        </form>
    </section>

    <!-- Invitation list -->
    <section class="bg-card overflow-hidden rounded-lg border">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="text-muted-foreground border-b text-left">
                    <tr>
                        <th scope="col" class="px-4 py-3 font-medium">{{ .locale.Tr "admin.invitations.code" }}</th>
                        <th scope="col" class="px-4 py-3 font-medium">{{ .locale.Tr "admin.invitations.copy_link" }}</th>
                        <th scope="col" class="px-4 py-3 font-medium">{{ .locale.Tr "admin.invitations.uses" }}</th>
                        <th scope="col" class="px-4 py-3 font-medium">{{ .locale.Tr "admin.invitations.expires_at" }}</th>
                        <th scope="col" class="px-4 py-3"><span class="sr-only">{{ .locale.Tr "admin.delete" }}</span></th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    {{ range $invitation := .invitations }}
                    <tr class="hover:bg-muted/40 {{ if not $invitation.IsUsable }}text-muted-foreground italic{{ end }}">
                        <td class="px-4 py-2 font-mono">{{ $invitation.Code }}</td>
                        <td class="px-4 py-2">
                            {{ if $invitation.IsUsable }}
                            <button type="button" class="text-muted-foreground hover:text-foreground cursor-pointer" title="{{ $.locale.Tr "admin.invitations.copy_link" }}"
                                    _="on click call navigator.clipboard.writeText('{{ $.baseHttpUrl }}/-/register?code={{ $invitation.Code }}')
                                         then add .text-primary to me then wait 1s then remove .text-primary from me">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z" /></svg>
                            </button>
                            {{ else }}
                            <span class="italic">{{ $.locale.Tr "admin.invitations.expired" }}</span>
                            {{ end }}
                        </td>
                        <td class="px-4 py-2">{{ $invitation.NbUsed }}/{{ $invitation.NbMax }}</td>
                        <td class="px-4 py-2">{{ $invitation.ExpiresAt | humanDate }}</td>
                        <td class="px-4 py-2 text-right">
                            <form action="{{ $.c.ExternalUrl }}/-/admin-panel/invitations/{{ $invitation.ID }}/delete" method="POST">
                                {{ $.csrfHtml }}
                                <button type="submit" class="text-destructive text-sm font-medium not-italic hover:underline"
                                        _="on click if not window.confirm('{{ $.locale.Tr "admin.invitations.delete_confirm" }}') halt the event">{{ $.locale.Tr "admin.delete" }}</button>
                            </form>
                        </td>
                    </tr>
                    {{ end }}
                </tbody>
            </table>
        </div>
    </section>
</div>
{{ end }}