{% extends 'admin/shell.html.twig' %}
{% set nav = 'menus' %}
{% block title %}Menüs{% endblock %}
{% block heading %}Menüs{% endblock %}
{% block lead %}Ein Eintrag verweist auf eine Seite, auf ein Sprungziel innerhalb einer Seite oder auf eine externe Adresse. Die Reihenfolge ergibt sich aus der Position, die Verschachtelung aus der Ebene.{% endblock %}
{% block content %}
{% for slot, slotName in slots %}
{% set menu = menus[slot]|default(null) %}
<section class="stack-section">
    <div class="section-head"><h2>{{ slotName }} <span class="count">{{ rows[slot]|length }}</span></h2><span class="muted">Platz <code>{{ slot }}</code></span></div>
    <form action="{{ path('admin_menu_save', {slot: slot}) }}" method="post" class="menu-form card card-body">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('menus') }}">
        <input type="hidden" name="expectedVersion" value="{{ menu ? menu.version : 0 }}">
        <label for="name-{{ slot }}">Name des Menüs</label>
        <input id="name-{{ slot }}" name="name" maxlength="120" required value="{{ menu ? menu.name : slotName }}">

        <table class="table menu-table">
            <caption class="visually-hidden">Einträge im Menü {{ slotName }}. Eine Beschriftung zu leeren entfernt den Eintrag.</caption>
            <thead><tr><th scope="col">Position</th><th scope="col">Ebene</th><th scope="col">Beschriftung</th><th scope="col">Ziel</th><th scope="col">Seite</th><th scope="col">Sprungziel</th><th scope="col">Adresse</th></tr></thead>
            <tbody>
            {% for index, row in rows[slot]|merge([{label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}, {label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}, {label: '', type: 'page', level: 1, pageId: '', anchor: '', url: ''}]) %}
                {% set n = loop.index0 %}
                <tr{% if row.label == '' %} class="table-new"{% endif %}>
                    <td><input type="number" name="items[{{ n }}][position]" value="{{ (n + 1) * 10 }}" min="0" max="9999" step="1" aria-label="Position von Eintrag {{ n + 1 }}"></td>
                    <td>
                        <select name="items[{{ n }}][level]" aria-label="Ebene von Eintrag {{ n + 1 }}">
                            <option value="1"{{ row.level == 1 ? ' selected' : '' }}>1 — oben</option>
                            <option value="2"{{ row.level == 2 ? ' selected' : '' }}>2 — Untereintrag</option>
                        </select>
                    </td>
                    <td><input name="items[{{ n }}][label]" maxlength="80" value="{{ row.label }}" aria-label="Beschriftung von Eintrag {{ n + 1 }}" placeholder="{{ row.label == '' ? 'Neuer Eintrag' : '' }}"></td>
                    <td>
                        <select name="items[{{ n }}][type]" aria-label="Zielart von Eintrag {{ n + 1 }}">
                            <option value="page"{{ row.type == 'page' ? ' selected' : '' }}>Seite</option>
                            <option value="url"{{ row.type == 'url' ? ' selected' : '' }}>Adresse</option>
                        </select>
                    </td>
                    <td>
                        <select name="items[{{ n }}][pageId]" aria-label="Seite von Eintrag {{ n + 1 }}">
                            <option value="">— Seite wählen —</option>
                            {% for page in pages %}<option value="{{ page.id }}"{{ row.pageId == page.id ? ' selected' : '' }}>{{ page.title }} (/{{ page.path == 'home' ? '' : page.path }})</option>{% endfor %}
                        </select>
                    </td>
                    <td><input name="items[{{ n }}][anchor]" maxlength="65" value="{{ row.anchor }}" aria-label="Sprungziel von Eintrag {{ n + 1 }}" placeholder="kontakt"></td>
                    <td><input name="items[{{ n }}][url]" maxlength="2048" value="{{ row.url }}" aria-label="Adresse von Eintrag {{ n + 1 }}" placeholder="https://…"></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <p class="field-help">Ein Sprungziel gilt zusammen mit der gewählten Seite und führt zu <code>/seite#sprungziel</code>. Als Adresse sind HTTPS-Adressen, lokale Pfade sowie <code>mailto:</code> und <code>tel:</code> erlaubt. Die letzten drei Zeilen sind für neue Einträge; beim Speichern werden sie neu durchnummeriert.</p>
        <button class="primary" type="submit">{{ slotName }} speichern</button>
    </form>
</section>
{% endfor %}
<p class="footnote">KantSites · Arbeitsstand</p>
{% endblock %}