{% extends "base.html" %}
{% block title %}Identities – ZMB Webui{% endblock %}
{% block content %}
<h2>Benutzer &amp; Gruppen</h2>

<div style="display:flex;gap:0.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--pico-muted-border-color);padding-bottom:0.5rem">
  <a href="/identities?tab=users" hx-get="/identities?tab=users" hx-target="body" hx-push-url="true"
     class="outline{% if tab != 'users' %} secondary{% endif %}">Benutzer</a>
  <a href="/identities?tab=groups" hx-get="/identities?tab=groups" hx-target="body" hx-push-url="true"
     class="outline{% if tab != 'groups' %} secondary{% endif %}">Gruppen</a>
</div>

<!-- Users -->
<div id="panel-users"{% if tab != 'users' %} style="display:none"{% endif %}>
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
    <h3 style="margin:0">Systembenutzer</h3>
    <button onclick="document.getElementById('new-user-form').style.display='block'">&#43; Neu</button>
  </div>

  <div id="new-user-form" style="display:none;margin-bottom:1rem">
    <article>
      <h4>Neuer Benutzer</h4>
      <form hx-post="/api/identities/users" hx-target="#user-list" hx-swap="innerHTML"
            hx-on::after-request="this.reset();document.getElementById('new-user-form').style.display='none'">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          <div><label>Benutzername</label><input name="username" required></div>
          <div><label>Passwort</label><input name="password" type="password" required></div>
        </div>
        <div class="actions"><button type="submit">Erstellen</button><button type="button" class="outline secondary" onclick="document.getElementById('new-user-form').style.display='none'">Abbrechen</button></div>
      </form>
    </article>
  </div>

  <div id="user-list" hx-get="/fragments/users" hx-trigger="load">
    <p aria-busy="true">Lade...</p>
  </div>
</div>

<!-- Groups -->
<div id="panel-groups"{% if tab != 'groups' %} style="display:none"{% endif %}>
  <div id="group-list" hx-get="/fragments/groups" hx-trigger="load">
    <p aria-busy="true">Lade...</p>
  </div>
</div>

{% endblock %}