{% extends 'admin/base.html.twig' %}
{% block title %}Bereiche{% endblock %}
{% block body %}
<header class="admin-header">
    <a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
    <div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><form action="{{ path('admin_logout') }}" method="post"><input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}"><button class="subtle" type="submit">Abmelden</button></form></div>
</header>
<main id="admin-main" class="pages-main" tabindex="-1">
    <p class="eyebrow">BEREICHE</p><h1>Kopf, Fuß und wiederverwendbare Sektionen</h1>
    <p class="muted">Alle drei sind Blockdokumente wie eine Seite und im selben Editor frei gestaltbar. Eine <strong>verknüpfte</strong> Sektion wird nicht kopiert: eine Änderung erreicht jede Seite, die sie einbindet.</p>
    <p class="admin-links">
        <a class="secondary" href="{{ path('admin_pages') }}">Seiten</a>
        <a class="secondary" href="{{ path('admin_menus') }}">Menüs</a>
        <a class="secondary" href="{{ path('admin_theme') }}">Design</a>
        <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a>
    </p>

    {% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
        <p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
    {% endfor %}{% endfor %}

    {% if is_granted('ROLE_EDITOR') %}
    <details class="create-panel"{% if app.flashes is not empty %} open{% endif %}>
        <summary>Neuen Bereich anlegen</summary>
        <form action="{{ path('admin_partial_create') }}" method="post" class="create-form">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('partials') }}">
            <div class="create-grid">
                <div>
                    <label for="new-name">Name</label>
                    <input id="new-name" name="name" maxlength="120" required autocomplete="off">
                </div>
                <div>
                    <label for="new-kind">Art</label>
                    <select id="new-kind" name="kind">
                        {% for value, label in kinds %}<option value="{{ value }}"{{ value == 'section' ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
                    </select>
                    <p class="field-help">Kopf- und Fußbereich gibt es je einmal.</p>
                </div>
                <div>
                    <label for="new-slug">Adresse</label>
                    <input id="new-slug" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" autocomplete="off">
                    <p class="field-help">Wird im Verknüpfungsblock eingetragen. Leer lassen, um sie aus dem Namen zu bilden.</p>
                </div>
            </div>
            <button class="primary" type="submit">Anlegen und bearbeiten</button>
        </form>
    </details>
    {% endif %}

    <div class="section-heading"><h2>Bereiche <span class="count">{{ partials|length }}</span></h2><span class="muted">Gespeicherte Änderungen sind sofort auf allen Seiten sichtbar.</span></div>
    <div class="page-list">
    {% for partial in partials %}
        <article class="page-card">
            <div class="page-icon" aria-hidden="true">{{ partial.kind == 'header' ? '▀' : (partial.kind == 'footer' ? '▄' : '▥') }}</div>
            <div class="page-info">
                <h3><a href="{{ path('admin_partial_editor', {id: partial.id}) }}">{{ partial.name }}</a></h3>
                <p>{{ kinds[partial.kind] }}{% if partial.kind == 'section' %} · Adresse <code>{{ partial.slug }}</code>{% endif %}
                {% if partial.kind == 'section' %}
                    · {% if partial.usedBy is empty %}<span>nirgends eingebunden</span>{% else %}eingebunden in {{ partial.usedBy|join(', ') }}{% endif %}
                {% endif %}
                </p>
            </div>
            <a class="secondary" href="{{ path('admin_partial_editor', {id: partial.id}) }}" aria-label="{{ partial.name }} bearbeiten">Bearbeiten <span aria-hidden="true">→</span></a>
            {% if partial.kind == 'section' and is_granted('ROLE_EDITOR') %}
            <details class="delete-panel">
                <summary aria-label="{{ partial.name }} entfernen">Entfernen</summary>
                <form action="{{ path('admin_partial_delete', {id: partial.id}) }}" method="post">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('partials') }}">
                    <p>Entfernt „{{ partial.name }}“.{% if partial.usedBy is not empty %} <strong>Noch eingebunden in {{ partial.usedBy|join(', ') }}</strong> – dort erscheint danach nichts mehr.{% endif %}</p>
                    <button class="secondary danger-text" type="submit">Sektion entfernen</button>
                </form>
            </details>
            {% endif %}
        </article>
    {% else %}
        <div class="empty-state"><h3>Noch keine Bereiche.</h3><p>Ein frisches Setup legt Kopf- und Fußbereich automatisch an.</p></div>
    {% endfor %}
    </div>
    <p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
</main>
{% endblock %}