{% extends "base.html" %}
{% block title %}Kategorien | Nouri{% endblock %}
{% block content %}
<section class="page-intro">
    <div>
        <p class="eyebrow">Kategorien</p>
        <h1>Kategorien global anpassen</h1>
        <p class="lead">Hier pflegt ihr die Auswahl für Lebensmittel und Mahlzeiten. Bestehende Einträge bleiben auch dann erhalten, wenn eine Kategorie später pausiert wird.</p>
    </div>
    <a class="ghost-button" href="{{ url_for('admin.user_list') }}">Zur Nutzerverwaltung</a>
</section>

<section class="panel compact-form-panel">
    <form method="post" class="inline-form">
        {{ csrf_input() }}
        <label class="wide">
            Neue Kategorie
            <input type="text" name="name" placeholder="z. B. Süßes, Vorrat, Unterwegs">
        </label>
        <label>
            Passt eher zu
            <select name="builder_key">
                {% for value, label in builder_options %}
                    <option value="{{ value }}">{{ label }}</option>
                {% endfor %}
            </select>
        </label>
        <button type="submit">Kategorie ergänzen</button>
    </form>
</section>

<section class="stack-list">
    {% for category in categories %}
        <article class="list-row stacked-mobile">
            <div>
                <strong>{{ category.name }}</strong>
                <p class="muted">
                    {% if category.name in default_categories %}Teil der ruhigen Standardauswahl{% else %}Eigene Haushaltskategorie{% endif %}
                    · {{ builder_descriptions[category.builder_key] }}
                </p>
                <div class="chip-row">
                    <span class="chip">{{ builder_descriptions[category.builder_key].split('.')[0] }}</span>
                    {% if category.is_active %}
                        <span class="chip status-home">Aktiv</span>
                    {% else %}
                        <span class="chip status-archived">Pausiert</span>
                    {% endif %}
                </div>
            </div>
            <div class="row-actions">
                <form method="post" action="{{ url_for('admin.category_update', category_id=category.id) }}" class="inline-form inline-form-tight">
                    {{ csrf_input() }}
                    <label>
                        <span class="sr-only">Baustein</span>
                        <select name="builder_key">
                            {% for value, label in builder_options %}
                                <option value="{{ value }}" {% if category.builder_key == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </label>
                    <button class="ghost-button" type="submit">Zuordnung speichern</button>
                </form>
                <form method="post" action="{{ url_for('admin.category_toggle', category_id=category.id) }}">
                    {{ csrf_input() }}
                    <button class="ghost-button" type="submit">
                        {% if category.is_active %}Pausieren{% else %}Wieder aktivieren{% endif %}
                    </button>
                </form>
                {% if category.name not in default_categories %}
                    <form method="post" action="{{ url_for('admin.category_delete', category_id=category.id) }}">
                        {{ csrf_input() }}
                        <button class="ghost-button" type="submit">Löschen</button>
                    </form>
                {% endif %}
            </div>
        </article>
    {% endfor %}
</section>
{% endblock %}