{% extends "base.html" %}
{% set active_page = "groups" %}
{% block page_title %}Gruppen{% endblock %}
{% block page_sub %}<div class="topbar-sub">{{ groups|length + 1 }} Gruppen · Rechteverwaltung</div>{% endblock %}
{% block topbar_right %}
<button type="button" class="btn btn-primary" data-open-modal="addGroupModal">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
  Neue Gruppe
</button>
{% endblock %}

{% block content %}

<p class="text-faint" style="font-size:12.5px; margin-bottom:18px; max-width:720px;">
  Über Gruppen lassen sich einzelne Verwaltungsrechte für Devices und Switches gezielt vergeben.
  Ein Benutzer kann mehreren Gruppen angehören — die Rechte addieren sich. Auf „Rechte“ klicken,
  um eine Gruppe aufzuklappen und die Berechtigungen im Detail zu sehen bzw. zu ändern.
</p>

<div class="table-wrap">
  <div style="overflow-x:auto;">
  <table class="data-table">
    <thead><tr><th>Gruppe</th><th>Mitglieder</th><th style="width:1%;">Aktionen</th></tr></thead>
    <tbody>
      <!-- Virtuelle "Admin"-Gruppe: Rechte sind fix (alles), Mitgliedschaft
           wird direkt über is_admin gesteuert. -->
      <tr>
        <td class="cell-name">Admin <span class="pill admin">Systemrolle</span></td>
        <td class="text-dim">{{ admin_virtual_group.member_names|length }}</td>
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Rechte anzeigen" onclick="toggleDetail('detail-admin')">
              <svg id="chev-admin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </button>
            <button class="icon-btn" title="Mitglieder verwalten" data-open-modal="adminMembersModal">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17.5" cy="8.5" r="2.4"/><path d="M15.8 14.2c2.7.3 4.7 2.4 4.7 5.3"/></svg>
            </button>
          </div>
        </td>
      </tr>
      <tr class="group-detail-row hidden" id="detail-admin">
        <td colspan="3">
          <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px;">
            {% for cat_key, cat in permission_catalog.items() %}
            <div>
              <div class="permission-group-title">{{ cat['label'] }}</div>
              <div class="check-list">
                {% for key, label in cat['items'].items() %}
                <label class="check-row" style="cursor:default; color:var(--text-faint);">
                  <input type="checkbox" checked disabled>
                  {{ label }}
                </label>
                {% endfor %}
              </div>
            </div>
            {% endfor %}
          </div>
          <p class="text-faint" style="font-size:11.5px; margin:12px 0 0;">Admins dürfen immer alles — diese Rechte sind fest und nicht änderbar.</p>
        </td>
      </tr>

      {% for g in groups %}
      <tr>
        <td class="cell-name">
          {{ g.name }}
          {% if g.is_default %}<span class="pill user" style="white-space:nowrap;">Standard</span>{% endif %}
        </td>
        <td class="text-dim">{{ g.member_names|length }}</td>
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Rechte anzeigen/bearbeiten" onclick="toggleDetail('detail-{{ g.id }}')">
              <svg id="chev-{{ g.id }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </button>
            <button class="icon-btn" title="Mitglieder verwalten" data-open-modal="membersModal{{ loop.index }}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17.5" cy="8.5" r="2.4"/><path d="M15.8 14.2c2.7.3 4.7 2.4 4.7 5.3"/></svg>
            </button>
            {% if not g.is_default %}
            <form method="post" data-confirm="Gruppe „{{ g.name }}“ wirklich löschen? Mitglieder verlieren die zugehörigen Rechte.">
              <input type="hidden" name="delete_group" value="{{ g.id }}">
              <button type="submit" 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>
            {% endif %}
          </div>
        </td>
      </tr>
      <tr class="group-detail-row hidden" id="detail-{{ g.id }}">
        <td colspan="3">
          <form method="post">
            <input type="hidden" name="save_group" value="1">
            <input type="hidden" name="permissions_submitted" value="1">
            <input type="hidden" name="group_id" value="{{ g.id }}">
            <input type="hidden" name="name" value="{{ g.name }}">
            <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px;">
              {% for cat_key, cat in permission_catalog.items() %}
              <div>
                <div class="permission-group-title">{{ cat['label'] }}</div>
                <div class="check-list">
                  {% for key, label in cat['items'].items() %}
                  <label class="check-row">
                    <input type="checkbox" name="permissions" value="{{ key }}" {% if key in g.permissions %}checked{% endif %}>
                    {{ label }}
                  </label>
                  {% endfor %}
                </div>
              </div>
              {% endfor %}
            </div>
            <div class="flex" style="justify-content:flex-end; margin-top:16px;">
              <button type="submit" class="btn btn-primary btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                Rechte speichern
              </button>
            </div>
          </form>
        </td>
      </tr>
      {% else %}
      <tr class="empty-row"><td colspan="3">Noch keine weiteren Gruppen angelegt.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>

<!-- Modal: Admin-Mitglieder verwalten -->
<div class="modal-overlay" id="adminMembersModal">
  <div class="modal" style="max-width:380px;">
    <form method="post">
      <input type="hidden" name="assign_admins" value="1">
      <div class="modal-header">
        <h3>Admin-Mitglieder</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <p class="text-faint" style="font-size:11.5px; margin:0 0 12px;">Mindestens ein Admin muss bestehen bleiben.</p>
        <div class="check-list" style="max-height:320px; overflow-y:auto; padding-right:4px;">
          {% for u in all_users_all %}
          <label class="check-row">
            <input type="checkbox" name="members" value="{{ u['id'] }}" {% if u['is_admin'] %}checked{% endif %}>
            {{ u['username'] }}
          </label>
          {% endfor %}
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" class="btn btn-primary">Speichern</button>
      </div>
    </form>
  </div>
</div>

<!-- Modals: Mitglieder pro Gruppe verwalten -->
{% for g in groups %}
<div class="modal-overlay" id="membersModal{{ loop.index }}">
  <div class="modal" style="max-width:380px;">
    <form method="post">
      <input type="hidden" name="save_group" value="1">
      <input type="hidden" name="members_submitted" value="1">
      <input type="hidden" name="group_id" value="{{ g.id }}">
      <input type="hidden" name="name" value="{{ g.name }}">
      <div class="modal-header">
        <h3>Mitglieder — {{ g.name }}</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <div class="check-list" style="max-height:320px; overflow-y:auto; padding-right:4px;">
          {% for u in all_users %}
          <label class="check-row">
            <input type="checkbox" name="members" value="{{ u['id'] }}" {% if u['id'] in g.members %}checked{% endif %}>
            {{ u['username'] }}
          </label>
          {% else %}
          <p class="text-faint" style="font-size:12px;">Keine Nicht-Admin-Benutzer vorhanden.</p>
          {% endfor %}
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" class="btn btn-primary">Speichern</button>
      </div>
    </form>
  </div>
</div>
{% endfor %}

<!-- Modal: Neue Gruppe -->
<div class="modal-overlay" id="addGroupModal">
  <div class="modal" style="max-width:380px;">
    <form method="post">
      <div class="modal-header">
        <h3>Neue Gruppe</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <input type="hidden" name="add_group" value="1">
        <div class="field">
          <label>Name</label>
          <input type="text" name="name" required placeholder="z.B. Facility-Team">
          <div class="field-hint">Rechte und Mitglieder werden danach über die Gruppentabelle eingestellt.</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" class="btn btn-primary">Anlegen</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
function toggleDetail(id) {
    const row = document.getElementById(id);
    if (!row) return;
    row.classList.toggle("hidden");
    const chev = document.getElementById(id.replace("detail-", "chev-"));
    if (chev) chev.style.transform = row.classList.contains("hidden") ? "" : "rotate(180deg)";
}
</script>
{% endblock %}