{% extends "base.html" %}
{% block titel %}{% if aktion == 'neu' %}Neuer Benutzer{% else %}Benutzer bearbeiten{% endif %} — {{ app_name }}{% endblock %}
{% block inhalt %}
<h1 class="text-2xl font-bold mb-4">
  {% if aktion == 'neu' %}Neuer Benutzer{% else %}Benutzer &bdquo;{{ ziel.username }}&ldquo; bearbeiten{% endif %}
</h1>

{% if fehler %}
<div class="mb-4 max-w-lg rounded-lg border border-red-300 bg-red-50 text-red-700 text-sm px-3 py-2" role="alert">
  {{ fehler }}
</div>
{% endif %}

<form method="post"
      action="{% if aktion == 'neu' %}/admin/benutzer/neu{% else %}/admin/benutzer/{{ ziel.id }}{% endif %}"
      class="bg-white border border-slate-200 rounded-xl p-6 max-w-lg space-y-4">

  <div>
    <label for="username" class="block text-sm font-medium mb-1">Benutzername</label>
    <input id="username" name="username" value="{{ form.username }}" required minlength="3"
           {% if aktion != 'neu' %}disabled{% endif %}
           class="w-full border border-slate-300 rounded-lg px-3 py-2 {% if aktion != 'neu' %}bg-slate-100{% endif %}">
    {% if aktion != 'neu' %}
    <p class="text-xs text-slate-400 mt-1">Der Benutzername kann nicht ge&auml;ndert werden.</p>
    {% endif %}
  </div>

  <div>
    <label for="display_name" class="block text-sm font-medium mb-1">Anzeigename</label>
    <input id="display_name" name="display_name" value="{{ form.display_name }}"
           class="w-full border border-slate-300 rounded-lg px-3 py-2">
  </div>

  <div>
    <label for="role" class="block text-sm font-medium mb-1">Rolle</label>
    {% if ziel and ziel.id == user.id %}
    <select id="role" name="role" aria-disabled="true" title="Eigene Rolle kann nicht ge&auml;ndert werden"
            class="w-full border border-slate-300 rounded-lg px-3 py-2 bg-white opacity-60 cursor-not-allowed">
      <option value="{{ form.role }}" selected>{{ rollen_anzeige.get(form.role, form.role) }}</option>
    </select>
    <input type="hidden" name="role" value="{{ form.role }}">
    {% else %}
    <select id="role" name="role"
            class="w-full border border-slate-300 rounded-lg px-3 py-2 bg-white">
      {% for rollen_wert, rollen_text in rollen_anzeige.items() %}
      <option value="{{ rollen_wert }}" {% if form.role == rollen_wert %}selected{% endif %}>{{ rollen_text }}</option>
      {% endfor %}
    </select>
    {% endif %}
  </div>

  {% if aktion == 'bearbeiten' %}
  <label class="flex items-center gap-2 text-sm">
    <input type="checkbox" name="active" {% if ziel.active %}checked{% endif %}
           {% if ziel and ziel.id == user.id %}aria-disabled="true" title="Eigener Status kann nicht ge&auml;ndert werden" class="opacity-60 cursor-not-allowed" onclick="return false;"{% endif %}>
    {% if ziel and ziel.id == user.id %}<input type="hidden" name="active" value="on">{% endif %}
    Aktiv
  </label>
  {% endif %}

  <div>
    <label for="password" class="block text-sm font-medium mb-1">
      {% if aktion == 'neu' %}Passwort{% else %}Neues Passwort (leer = unver&auml;ndert){% endif %}
    </label>
    <input id="password" name="password" type="password" {% if aktion == 'neu' %}required{% endif %} minlength="8"
           class="w-full border border-slate-300 rounded-lg px-3 py-2">
  </div>

  <div class="flex gap-3 pt-2">
    <button type="submit"
            class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg px-4 py-2">
      Speichern
    </button>
    <a href="/admin/benutzer"
       class="border border-slate-300 rounded-lg px-4 py-2 text-sm hover:bg-slate-50">Abbrechen</a>
  </div>
</form>
{% endblock %}