{% extends "base.html" %}
{% block title %}Optionen | {{ app_name }}{% endblock %}
{% block content %}
  {% from "_ui.html" import avatar %}
  <section class="page-hero">
    <div>
      <div class="eyebrow">Optionen</div>
      <h1>Benutzerverwaltung</h1>
      <p class="muted">Kategorien, Einträge und Split-Personen werden jetzt direkt in der Planung gepflegt. Hier bleiben nur App-Zugänge und Rollen.</p>
    </div>
  </section>

  <section class="panel">
    <div class="panel-head"><h2>Benutzer</h2></div>
    <form method="post" action="{{ url_for('admin.create_user') }}" class="stack-form" enctype="multipart/form-data">
      <input name="username" placeholder="Benutzername" required>
      <input name="display_name" placeholder="Anzeigename" required>
      <input name="email" type="email" placeholder="E-Mail" required>
      <label>
        <span>Avatar hochladen</span>
        <input name="avatar_file" type="file" accept="image/*">
      </label>
      <input name="avatar_url" placeholder="Avatar-URL optional">
      <input name="password" type="password" placeholder="Passwort" required>
      <select name="role">
        <option value="editor">editor</option>
        <option value="admin">admin</option>
      </select>
      <button class="primary-button" type="submit">Benutzer anlegen</button>
    </form>
    {% for user in users %}
      <div class="month-row">
        <div class="list-row-main">
          {{ avatar(user.ui_name, user.avatar_url, user.avatar_initials, "sm") }}
          <div>
          <strong>{{ user.ui_name }}</strong>
          <small>{{ user.role }} · {{ "aktiv" if user.is_active else "deaktiviert" }}</small>
          </div>
        </div>
        <div class="row-actions">
          <button class="ghost-button" type="button" data-open-dialog="user-dialog-{{ user.id }}">Bearbeiten</button>
          <form method="post" action="{{ url_for('admin.toggle_user', user_id=user.id) }}">
            <button class="ghost-button" type="submit">Status ändern</button>
          </form>
        </div>
      </div>
    {% endfor %}
  </section>

  {% for user in users %}
    <dialog id="user-dialog-{{ user.id }}" class="app-dialog">
      <form method="dialog" class="dialog-close-row">
        <button class="dialog-close-button" type="submit" aria-label="Schließen">×</button>
      </form>
      <form method="post" action="{{ url_for('admin.update_user', user_id=user.id) }}" class="stack-form" enctype="multipart/form-data">
        <h3>{{ user.ui_name }} bearbeiten</h3>
        <input value="{{ user.username }}" disabled>
        <input name="display_name" value="{{ user.ui_name }}" required>
        <input name="email" type="email" value="{{ user.email }}" required>
        <label>
          <span>Avatar hochladen</span>
          <input name="avatar_file" type="file" accept="image/*">
        </label>
        <input name="avatar_url" value="{{ user.avatar_url or '' }}" placeholder="Avatar-URL optional">
        <select name="role">
          <option value="editor" {% if user.role == "editor" %}selected{% endif %}>editor</option>
          <option value="admin" {% if user.role == "admin" %}selected{% endif %}>admin</option>
        </select>
        <label class="check-label"><input type="checkbox" name="is_active" {% if user.is_active %}checked{% endif %}> Aktiv</label>
        <button class="primary-button" type="submit">Speichern</button>
      </form>
    </dialog>
  {% endfor %}
{% endblock %}