{% extends "base.html" %}
{% block title %}Gruppen{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Gruppen verwalten</h1>
    <a href="/einstellungen" role="button" class="btn-sm outline">&#x2190; Einstellungen</a>
</div>

<div class="card">
    <div class="card-header">
        <h3>Neue Gruppe</h3>
    </div>
    <form method="post" action="/einstellungen/gruppen/neu" style="display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap;">
        <div>
            <label style="font-size: 0.8rem;">Kürzel</label>
            <input type="text" name="kuerzel" required placeholder="z.B. VER" maxlength="10" style="margin: 0; width: 6rem;">
        </div>
        <div style="flex: 1;">
            <label style="font-size: 0.8rem;">Name</label>
            <input type="text" name="name" required placeholder="z.B. Vereinsname" style="margin: 0;">
        </div>
        <button type="submit" class="btn-sm" style="margin: 0; height: 2.4rem;">Anlegen</button>
    </form>
</div>

<div class="card">
    <div class="card-header">
        <h3>Gruppen ({{ gruppen|length }})</h3>
    </div>
    {% if gruppen %}
    <table class="data-table">
        <thead>
            <tr>
                <th>Kürzel</th>
                <th>Name</th>
                <th style="text-align:right;">Kontakte</th>
                <th style="width: 10rem;">Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for g in gruppen %}
            <tr>
                <td style="font-family: monospace; font-weight: 600;">{{ g.kuerzel }}</td>
                <td>{{ g.name }}</td>
                <td style="text-align:right;">{{ g.kontakte|length }}</td>
                <td>
                    <div style="display: flex; gap: 0.25rem;">
                        <button type="button" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem;"
                                onclick="var d=document.getElementById('edit-{{ g.id }}'); d.style.display=d.style.display==='none'?'table-row':'none';"
                                title="Bearbeiten">&#x270F;</button>
                        <form method="post" action="/einstellungen/gruppen/{{ g.id }}/loeschen" style="display: inline;"
                              onsubmit="return confirm('Gruppe &quot;{{ g.name }}&quot; wirklich löschen?');">
                            <button type="submit" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem; color: var(--kw-danger);" title="Löschen">&#x1F5D1;</button>
                        </form>
                    </div>
                </td>
            </tr>
            <tr id="edit-{{ g.id }}" style="display: none; background: var(--kw-bg);">
                <td colspan="5">
                    <form method="post" action="/einstellungen/gruppen/{{ g.id }}/bearbeiten"
                          style="display: flex; gap: 0.5rem; align-items: center; padding: 0.3rem 0;">
                        <input type="text" name="name" value="{{ g.name }}" style="margin: 0; flex: 1;" placeholder="Name">
                        <button type="submit" class="btn-sm" style="margin: 0;">Speichern</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state"><p>Keine Gruppen vorhanden.</p></div>
    {% endif %}
</div>
{% endblock %}
