{% extends "base.html" %}
{% block titel %}Benutzerverwaltung — {{ app_name }}{% endblock %}
{% block inhalt %}
<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-bold">Benutzerverwaltung</h1>
  <a href="/admin/benutzer/neu"
     class="bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white rounded-lg px-3 py-2 text-sm font-medium min-h-[44px] inline-flex items-center">
    + Neuer Benutzer
  </a>
</div>

<div class="bg-white rounded-xl border border-slate-200 overflow-x-auto">
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-left text-slate-500">
      <tr>
        <th class="px-4 py-2 font-medium">Benutzername</th>
        <th class="px-4 py-2 font-medium">Anzeigename</th>
        <th class="px-4 py-2 font-medium">Rolle</th>
        <th class="px-4 py-2 font-medium">Status</th>
        <th class="px-4 py-2 font-medium">Erstellt am</th>
        <th class="px-4 py-2"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for b in benutzer %}
      <tr>
        <td class="px-4 py-2 font-medium">{{ b.username }}</td>
        <td class="px-4 py-2">{{ b.display_name }}</td>
        <td class="px-4 py-2">{{ rollen_anzeige[b.role] or b.role }}</td>
        <td class="px-4 py-2">
          {% if b.active %}
            <span class="text-emerald-700">aktiv</span>
          {% else %}
            <span class="text-red-600">deaktiviert</span>
          {% endif %}
        </td>
        <td class="px-4 py-2 text-slate-500">{{ b.created_at.strftime('%d.%m.%Y') if b.created_at else '&ndash;' }}</td>
        <td class="px-4 py-2 text-right">
          <a class="text-emerald-700 hover:underline" href="/admin/benutzer/{{ b.id }}">Bearbeiten</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}