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

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

<div class="card">
    <div class="card-header">
        <h3>Gruppen ({{ gruppen|length }})</h3>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Gruppe</th>
                <th style="text-align:right;">Optionen</th>
                <th style="text-align:right;">Aktiv</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for g in gruppen %}
            <tr style="cursor:pointer;" onclick="window.location='/einstellungen/kategorien/{{ g.key }}'">
                <td><strong>{{ g.label }}</strong><br><span style="font-size:0.75rem; color:var(--kw-text-muted);">{{ g.key }}</span></td>
                <td style="text-align:right;">{{ g.anzahl }}</td>
                <td style="text-align:right;">{{ g.aktiv }}</td>
                <td><a href="/einstellungen/kategorien/{{ g.key }}" class="btn-sm outline" style="font-size:0.75rem; padding:0.15rem 0.5rem;">Bearbeiten</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}
