{{ define "content" }}
<div class="space-y-6">
    <header class="flex min-h-9 flex-wrap items-center justify-between gap-3">
        <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "gist.list.users" }}</h1>
    </header>

    <!-- Search / sort toolbar -->
    <div class="flex flex-wrap items-center gap-2">
        <form action="{{ .c.ExternalUrl }}/-/users" method="GET" class="flex flex-1 flex-wrap items-center gap-2">
            <div class="relative min-w-60 flex-1">
                <input type="text" name="q" value="{{ .searchQuery }}" autocomplete="off" spellcheck="false"
                       placeholder="{{ .locale.Tr "explore.users.search-placeholder" }}"
                       class="border-input bg-background focus-within:ring-ring block h-9 w-full rounded-md border px-3 py-1 text-sm outline-none focus:ring-1" />
            </div>
            <input type="hidden" name="sort" value="{{ .sort }}" />
            <input type="hidden" name="order" value="{{ .order }}" />
            <button type="submit" class="btn h-9 shrink-0">{{ .locale.Tr "gist.search.placeholder.search" }}</button>
        </form>

        <!-- Sort dropdown (Basecoat dropdown-menu, JS) -->
        <div class="dropdown-menu ml-auto shrink-0">
            <button type="button" id="sort-trigger" aria-haspopup="menu" aria-expanded="false" aria-controls="sort-menu" class="btn-outline">
                {{ .locale.Tr "gist.list.sort" }} :
                {{ if eq .sort "joined" }}
                    {{ if eq .order "desc" }}{{ .locale.Tr "explore.users.sort-joined-desc" }}{{ else }}{{ .locale.Tr "explore.users.sort-joined-asc" }}{{ end }}
                {{ else }}
                    {{ if eq .order "desc" }}{{ .locale.Tr "explore.users.sort-username-desc" }}{{ else }}{{ .locale.Tr "explore.users.sort-username-asc" }}{{ end }}
                {{ end }}
                <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
            </button>
            <div id="sort-menu" data-popover aria-hidden="true" data-side="bottom" data-align="end">
                <div role="menu" aria-labelledby="sort-trigger">
                    <a href="{{ .c.ExternalUrl }}/{{ .urlPage }}{{ .pagination.WithParams "sort" "username" "order" "asc" }}" role="menuitem">{{ .locale.Tr "explore.users.sort-username-asc" }}</a>
                    <a href="{{ .c.ExternalUrl }}/{{ .urlPage }}{{ .pagination.WithParams "sort" "username" "order" "desc" }}" role="menuitem">{{ .locale.Tr "explore.users.sort-username-desc" }}</a>
                    <a href="{{ .c.ExternalUrl }}/{{ .urlPage }}{{ .pagination.WithParams "sort" "joined" "order" "desc" }}" role="menuitem">{{ .locale.Tr "explore.users.sort-joined-desc" }}</a>
                    <a href="{{ .c.ExternalUrl }}/{{ .urlPage }}{{ .pagination.WithParams "sort" "joined" "order" "asc" }}" role="menuitem">{{ .locale.Tr "explore.users.sort-joined-asc" }}</a>
                </div>
            </div>
        </div>
    </div>

    {{ if ne (len .users) 0 }}
        <div class="overflow-hidden rounded-md border">
            <table class="w-full text-sm">
                <thead class="bg-muted/50 text-muted-foreground">
                    <tr class="border-b">
                        <th class="px-4 py-2 text-left font-medium">{{ .locale.Tr "admin.user" }}</th>
                        <th class="px-4 py-2 text-right font-medium">{{ .locale.Tr "gist.list.gists" }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    {{ range .users }}
                    <tr class="hover:bg-muted/50">
                        <td class="px-4 py-2">
                            <a href="{{ $.c.ExternalUrl }}/{{ .Username }}" class="flex items-center gap-3">
                                {{ if not (shouldGenerateAvatar .User $.DisableGravatar) }}
                                    <img class="size-11 shrink-0 rounded-md border object-cover" src="{{ avatarUrl .User $.DisableGravatar }}" alt="{{ .Username }}" />
                                {{ else }}
                                    <svg class="size-11 shrink-0 rounded-md border" data-jdenticon-value="{{ .Username }}" width="44" height="44"></svg>
                                {{ end }}
                                <span class="flex flex-col">
                                    <span class="text-primary dark:text-violet-300 text-base font-medium hover:underline">{{ .Username }}</span>
                                    <span class="text-muted-foreground text-xs">{{ $.locale.Tr "gist.list.joined" }} {{ .CreatedAt | humanTimeDiff }}</span>
                                </span>
                            </a>
                        </td>
                        <td class="text-muted-foreground px-4 py-2 text-right tabular-nums">{{ .NbGists }}</td>
                    </tr>
                    {{ end }}
                </tbody>
            </table>
        </div>
        {{ template "pagination" . }}
    {{ else }}
        <div class="text-muted-foreground flex flex-col items-center justify-center py-16 text-center">
            <svg class="size-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            <h3 class="text-foreground mt-3 text-sm font-medium">{{ .locale.Tr "explore.users.no-users" }}</h3>
        </div>
    {{ end }}
</div>
{{ end }}