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

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

<div class="card">
    <div class="card-header">
        <h3>Neue Option</h3>
    </div>
    <form method="post" action="/einstellungen/kategorien/{{ gruppe }}/neu" style="display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap;">
        <div>
            <label style="font-size: 0.8rem;">Wert (intern)</label>
            <input type="text" name="wert" required placeholder="z.B. telefonat" style="margin: 0; min-width: 120px;">
        </div>
        <div style="flex: 1;">
            <label style="font-size: 0.8rem;">Label (Anzeige)</label>
            <input type="text" name="label" required placeholder="z.B. Telefonat" style="margin: 0;">
        </div>
        <div>
            <label style="font-size: 0.8rem;">Icon</label>
            <input type="text" name="icon" placeholder="z.B. &#x1f4de;" style="margin: 0; width: 4rem;">
        </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>Optionen ({{ optionen|length }})</h3>
    </div>
    {% if optionen %}
    <table class="data-table">
        <thead>
            <tr>
                <th style="width: 2.5rem;">#</th>
                <th>Icon</th>
                <th>Wert</th>
                <th>Label</th>
                <th>Aktiv</th>
                <th style="width: 16rem;">Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for opt in optionen %}
            <tr{% if not opt.aktiv %} style="opacity: 0.5;"{% endif %}>
                <td style="color: var(--kw-text-muted); font-size: 0.8rem;">{{ loop.index }}</td>
                <td>{{ opt.icon or '' }}</td>
                <td style="font-size: 0.85rem; font-family: monospace;">{{ opt.wert }}</td>
                <td>{{ opt.label }}</td>
                <td>
                    <form method="post" action="/einstellungen/kategorien/{{ gruppe }}/{{ opt.id }}/toggle" style="display: inline;">
                        <button type="submit" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem;"
                                title="{% if opt.aktiv %}Deaktivieren{% else %}Aktivieren{% endif %}">
                            {% if opt.aktiv %}&#x2705;{% else %}&#x274c;{% endif %}
                        </button>
                    </form>
                </td>
                <td>
                    <div style="display: flex; gap: 0.25rem;">
                        <form method="post" action="/einstellungen/kategorien/{{ gruppe }}/{{ opt.id }}/hoch" style="display: inline;">
                            <button type="submit" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem;" title="Nach oben">&#x25B2;</button>
                        </form>
                        <form method="post" action="/einstellungen/kategorien/{{ gruppe }}/{{ opt.id }}/runter" style="display: inline;">
                            <button type="submit" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem;" title="Nach unten">&#x25BC;</button>
                        </form>
                        <button type="button" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem;"
                                onclick="var d=document.getElementById('edit-{{ opt.id }}'); d.style.display=d.style.display==='none'?'table-row':'none';"
                                title="Bearbeiten">&#x270F;</button>
                        <form method="post" action="/einstellungen/kategorien/{{ gruppe }}/{{ opt.id }}/loeschen" style="display: inline;"
                              onsubmit="return confirm('Option &quot;{{ opt.label }}&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-{{ opt.id }}" style="display: none; background: var(--kw-bg);">
                <td colspan="7">
                    <form method="post" action="/einstellungen/kategorien/{{ gruppe }}/{{ opt.id }}/bearbeiten"
                          style="display: flex; gap: 0.5rem; align-items: center; padding: 0.3rem 0;">
                        <input type="text" name="label" value="{{ opt.label }}" style="margin: 0; flex: 1;" placeholder="Label">
                        <input type="text" name="icon" value="{{ opt.icon or '' }}" style="margin: 0; width: 4rem;" placeholder="Icon">
                        <button type="submit" class="btn-sm" style="margin: 0;">Speichern</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state"><p>Keine Optionen vorhanden.</p></div>
    {% endif %}
</div>
{% endblock %}
