{{ 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.users" }}</p>
    </header>

    <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.id" }}</th>
                        <th scope="col" class="px-4 py-3 font-medium">{{ .locale.Tr "admin.user" }}</th>
                        <th scope="col" class="px-4 py-3 font-medium">{{ .locale.Tr "admin.created_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 $user := .data }}
                    <tr class="hover:bg-muted/40">
                        <td class="px-4 py-2">{{ $user.ID }}</td>
                        <td class="px-4 py-2"><a href="{{ $.c.ExternalUrl }}/{{ $user.Username }}" class="text-primary hover:underline">{{ $user.Username }}</a></td>
                        <td class="text-muted-foreground px-4 py-2">{{ $user.CreatedAt | humanDate }}</td>
                        <td class="px-4 py-2 text-right">
                            <form action="{{ $.c.ExternalUrl }}/-/admin-panel/users/{{ $user.ID }}/delete" method="POST">
                                {{ $.csrfHtml }}
                                <button type="submit" class="text-destructive text-sm font-medium hover:underline"
                                        _="on click if not window.confirm('{{ $.locale.Tr "admin.users.delete_confirm" }}') halt the event">{{ $.locale.Tr "admin.delete" }}</button>
                            </form>
                        </td>
                    </tr>
                    {{ end }}
                </tbody>
            </table>
        </div>
    </section>

    {{ template "pagination" . }}
</div>
{{ end }}