{% extends "base.html" %}
{% set active_page = "users" %}
{% block page_title %}Benutzer{% endblock %}
{% block page_sub %}<div class="topbar-sub">{{ users|length }} Benutzer</div>{% endblock %}

{% block content %}

<div class="section-head">
  <div>
    <h2 style="font-size:16px;">Benutzer</h2>
    <div class="hint">Benutzerkonten mit Zugriff auf den PoE Manager. Die Gruppe bestimmt, welche Verwaltungsrechte ein Benutzer hat.</div>
  </div>
  <button type="button" class="btn btn-primary" data-open-modal="userModal" onclick="document.getElementById('userForm').reset();">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
    Neuer Benutzer
  </button>
</div>

<div class="table-wrap">
  <div style="overflow-x:auto;">
  <table class="data-table" data-sortable>
    <thead><tr>
      <th data-sort-key="username">Username</th>
      <th data-sort-key="name">Name</th>
      <th data-sort-key="group">Gruppe</th>
      <th style="width:1%;">Aktionen</th>
    </tr></thead>
    <tbody>
      {% for u in users %}
      {% set full_name = [u['first_name'], u['last_name']]|select|join(' ') %}
      {% set group_label = 'Admin' if u['is_admin'] else (u['group_names'] or '') %}
      <tr data-sort-username="{{ u['username']|lower }}" data-sort-name="{{ full_name|lower }}" data-sort-group="{{ group_label|lower }}">
        <td class="cell-name">{{ u['username'] }}</td>
        <td class="text-dim">{{ full_name or '—' }}</td>
        <td>
          {% if u['is_admin'] %}
          <span class="pill admin">Admin</span>
          {% else %}
          <span class="text-dim">{{ u['group_names'] or '—' }}</span>
          {% endif %}
        </td>
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Bearbeiten"
                    onclick="openEditModal({{ u['id'] }}, '{{ u['username'] }}', '{{ u['first_name'] or '' }}', '{{ u['last_name'] or '' }}')">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>
            </button>
            <button class="icon-btn" title="Gruppe zuweisen"
                    onclick="openGroupModal({{ u['id'] }}, '{{ 'admin' if u['is_admin'] else (u['group_id'] or '') }}')">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/><path d="M8.2 10.7l7.6-4.4M8.2 13.3l7.6 4.4"/></svg>
            </button>
            <form method="post" data-confirm="Willst du „{{ u['username'] }}“ wirklich löschen?">
              <button type="submit" name="delete_user" value="{{ u['id'] }}" class="icon-btn" style="color:var(--danger);" title="Löschen">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/></svg>
              </button>
            </form>
          </div>
        </td>
      </tr>
      {% else %}
      <tr class="empty-row"><td colspan="4">Noch keine Benutzer vorhanden.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>

<!-- Modal: Neuer Benutzer -->
<div class="modal-overlay" id="userModal">
  <div class="modal">
    <form method="post" id="userForm">
      <div class="modal-header">
        <h3>Neuen Benutzer anlegen</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <div class="field"><label>Vorname</label><input type="text" name="first_name"></div>
        <div class="field"><label>Name</label><input type="text" name="last_name"></div>
        <div class="field"><label>Username</label><input type="text" name="username" required></div>
        <div class="field"><label>Passwort</label><input type="password" name="password" required></div>
        <div class="field">
          <label>Gruppe</label>
          <select name="group_id">
            {% for g in all_groups %}<option value="{{ g['id'] }}" {% if g['is_default'] %}selected{% endif %}>{{ g['name'] }}</option>{% endfor %}
            <option value="admin">Admin</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" name="add_user" value="1" class="btn btn-primary">Anlegen</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal: Benutzer bearbeiten (Stammdaten + optional neues Passwort;
     Gruppe/Rolle wird ausschließlich über "Gruppe zuweisen" geändert) -->
<div class="modal-overlay" id="editModal">
  <div class="modal">
    <form method="post" id="editForm">
      <input type="hidden" name="user_id" id="edit_user_id">
      <div class="modal-header">
        <h3>Benutzer bearbeiten</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <div class="field"><label>Vorname</label><input type="text" name="first_name" id="edit_first_name"></div>
        <div class="field"><label>Name</label><input type="text" name="last_name" id="edit_last_name"></div>
        <div class="field"><label>Username</label><input type="text" name="username" id="edit_username" required></div>
        <div class="field"><label>Neues Passwort</label>
          <input type="password" name="new_password" placeholder="Nur bei Änderung ausfüllen">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" name="edit_user" value="1" class="btn btn-primary">Speichern</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal: Gruppe zuweisen (inkl. Admin als Auswahl) -->
<div class="modal-overlay" id="groupModal">
  <div class="modal" style="max-width:380px;">
    <form method="post" id="groupForm">
      <input type="hidden" name="user_id" id="group_user_id">
      <div class="modal-header">
        <h3>Gruppe zuweisen</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <div class="field">
          <label>Gruppe</label>
          <select name="group_id" id="group_select">
            <option value="">Keine Gruppe</option>
            {% for g in all_groups %}<option value="{{ g['id'] }}">{{ g['name'] }}</option>{% endfor %}
            <option value="admin">Admin</option>
          </select>
          <div class="field-hint">Ersetzt die bisherige Gruppen-/Rollenzuordnung dieses Benutzers.</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" name="assign_group" value="1" class="btn btn-primary">Speichern</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
function openEditModal(userId, username, firstName, lastName) {
    document.getElementById("edit_user_id").value = userId;
    document.getElementById("edit_username").value = username;
    document.getElementById("edit_first_name").value = firstName;
    document.getElementById("edit_last_name").value = lastName;
    document.querySelector("#editForm input[name='new_password']").value = "";
    PoeUI.openModal("editModal");
}
function openGroupModal(userId, groupChoice) {
    document.getElementById("group_user_id").value = userId;
    document.getElementById("group_select").value = groupChoice || "";
    PoeUI.openModal("groupModal");
}
</script>
{% endblock %}