{{define "content"}}
<section class="space-y-6">
  <div>
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white" data-i18n="admin.dashboard.title">Admin Dashboard</h1>
    <p class="text-gray-600 dark:text-gray-300" data-i18n="admin.dashboard.area">Area amministrazione.</p>
  </div>

  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <article class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
      <p class="text-sm font-medium text-gray-500 dark:text-gray-400" data-i18n="admin.users_count">Utenti</p>
      <p class="mt-2 text-3xl font-semibold text-gray-900 dark:text-white">{{if .PageData}}{{.PageData.Total}}{{else}}-{{end}}</p>
    </article>
    <article class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
      <p class="text-sm font-medium text-gray-500 dark:text-gray-400" data-i18n="admin.current_role">Ruolo corrente</p>
      <p class="mt-2">
        {{if and .CurrentUser (eq .CurrentUser.Role "admin")}}
        <span class="rounded-sm bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800" data-i18n="user.role_admin">admin</span>
        {{else}}
        <span class="rounded-sm bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800" data-i18n="user.role_user">user</span>
        {{end}}
      </p>
    </article>
    <article class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
      <p class="text-sm font-medium text-gray-500 dark:text-gray-400" data-i18n="admin.navigation">Navigazione</p>
      <a href="/admin/users" class="mt-2 inline-flex rounded-lg bg-blue-700 px-4 py-2 text-sm font-medium text-white hover:bg-blue-800" data-i18n="admin.manage_users">Gestione utenti</a>
    </article>
  </div>
</section>
{{end}}