{% extends 'admin/shell.html.twig' %}
{% set nav = 'menus' %}
{% block title %}Menüs{% endblock %}
{% block heading %}Menüs{% endblock %}
{% block lead %}Inhalte suchen und hinzufügen. Rechts bestimmst du Beschriftung, Reihenfolge und Unterpunkte.{% endblock %}
{% block styles %}<link rel="stylesheet" href="/assets/media-dialog.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/button-controls.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}">{% endblock %}
{% block scripts %}<script type="module" src="/assets/menu-editor.js?v={{ kant_version() }}"></script>{% endblock %}
{% block content %}
{% include 'admin/menu-icons.html.twig' %}
<nav class="menu-slots" aria-label="Menü auswählen">{% for key, label in slots %}<a href="{{ path('admin_menus', {slot: key}) }}"{{ key == slot ? ' aria-current="page"' : '' }}>{{ label }}</a>{% endfor %}</nav>
<form action="{{ path('admin_menu_save', {slot: slot}) }}" method="post" id="menu-editor" class="menu-workspace menu-form" data-icons="{{ menuIcons|json_encode|e('html_attr') }}" data-button-schema="{{ buttonSchema|json_encode|e('html_attr') }}">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token('menus') }}"><input type="hidden" name="expectedVersion" value="{{ menu ? menu.version : 0 }}">
    <aside class="menu-add" aria-label="Menüeinträge hinzufügen">
        <section class="card card-body"><h2>Seiten und Beiträge</h2>
            {% include 'admin/content-picker.html.twig' with {id: 'menu-search', name: 'selected_content', label: 'Inhalte suchen'} %}
            <button type="button" class="secondary full-width" id="menu-add-page" disabled>Zum Menü hinzufügen</button>
        </section>
        <details class="card"><summary>Eigener Link</summary><div class="card-body">
            <label for="link-label">Beschriftung</label><input id="link-label" maxlength="80" placeholder="Kontakt">
            <label for="link-url">Adresse</label><div class="link-field" data-link-field><input id="link-url" maxlength="2048" placeholder="https://… oder /kontakt" data-link-input></div>
            <p class="field-help">Auch mailto: und tel: sind möglich.</p>
            <label class="check-label" for="link-new-tab"><input id="link-new-tab" type="checkbox"> In neuem Tab öffnen</label>
            <button type="button" class="secondary" id="menu-add-url">Link hinzufügen</button>
        </div></details>
        <p class="field-help">Änderungen werden mit „Menü speichern“ auf der Website sichtbar. Unterpunkte gehören zum jeweils darüberstehenden Haupteintrag.</p>
    </aside>
    <section class="card menu-structure" aria-label="Menüstruktur">
        <div class="card-head"><h2>{{ slotName }}</h2><span class="count" id="menu-count">{{ rows|length }} Einträge</span></div>
        <div class="card-body">
            <label for="menu-name">Name des Menüs</label><input id="menu-name" name="name" maxlength="120" required value="{{ menu ? menu.name : slotName }}">
            <ol id="menu-items" class="menu-items">{% for row in rows %}{% include 'admin/menu-entry.html.twig' with {row: row, n: loop.index0} %}{% endfor %}</ol>
            <p id="menu-empty" class="empty"{{ rows is not empty ? ' hidden' : '' }}>Dieses Menü hat noch keine Einträge. Füge links eine Seite oder einen Link hinzu.</p>
            <div class="menu-save"><button class="primary" type="submit">Menü speichern</button><button type="button" class="secondary" id="menu-undo" disabled>Rückgängig</button><span id="menu-status" role="status">Gespeicherter Stand</span></div>
            <p id="menu-error" class="notice error" role="alert" hidden></p>
        </div>
    </section>
</form>
{% endblock %}