{% extends ajax-suffix ? "@gantry-admin/partials/ajax.html.twig" : "@gantry-admin/partials/base.html.twig" %}

{% block gantry %}
<form method="post" action="{{ gantry.route('menu', id) }}">
    <div class="menu-header">
        <span class="float-right">
            <button class="button button-back-to-conf"><i class="fa fa-fw fa-arrow-left"></i> <span>{{ 'GANTRY5_PLATFORM_BACK_SETUP'|trans }}</span></button>
            <button type="submit" class="button button-primary button-save" data-save="{{ 'GANTRY5_PLATFORM_MENU'|trans }}"><i class="fa fa-fw fa-check"></i> <span>{{ 'GANTRY5_PLATFORM_SAVE_MENU'|trans }}</span></button>
        </span>
        <h2 class="page-title">{{ 'GANTRY5_PLATFORM_MENU_EDITOR'|trans }}</h2>
        <select placeholder="{{ 'GANTRY5_PLATFORM_SELECT_ELI'|trans }}" data-selectize-ajaxify data-selectize data-g5-ajaxify-target="[data-g5-content]" class="menu-select-wrap">
            {% for menu_name in menus %}
            <option value="{{ menu_name|e }}"
                    {% if id == menu_name %}selected="selected"{% endif %}
                    data-data="{{ {url: gantry.route('menu', menu_name)}|json_encode|e('html_attr') }}">
                {{ menu_name|capitalize|e }}{{ default_menu == menu_name ? ' ★' : '' }}
            </option>
            {% endfor %}
        </select>
    </div>

    <div class="g5-mm-particles-picker">
        <ul class="g-menu-addblock">
            <li data-mm-blocktype="module" data-mm-id="__module"><span class="menu-item"><i class="fa fa-fw fa-arrows-alt"></i> <span class="title">{{ 'GANTRY5_PLATFORM_MODULE'|trans }}</span></span> <a class="config-cog" href="{{ gantry.route('menu/select/module') }}"><i class="fa fa-cog"></i></a></li>
            <li data-mm-blocktype="particle" data-mm-id="__particle"><span class="menu-item"><i class="fa fa-fw fa-arrows-alt"></i> <span class="title">{{ 'GANTRY5_PLATFORM_PARTICLE'|trans }}</span></span></span> <a class="config-cog" href="{{ gantry.route('menu/select/particle') }}"><i class="fa fa-cog"></i></a></li>
        </ul>
    </div>
    <div id="menu-editor"
         data-menu-ordering="{{ menu.ordering|json_encode|escape('html_attr') }}"
         data-menu-items="{{ menu.items|json_encode|escape('html_attr') }}"
         data-menu-settings="{{ menu.settings|json_encode|escape('html_attr') }}">
        {% if menu.items|length %}
            {% include 'menu/base.html.twig' with {'item': menu.root} %}
        {% else %}
            {% include 'menu/empty.html.twig' with {'item': menu.root} %}
        {% endif %}
    </div>

    <div id="trash" data-mm-eraseparticle><div class="trash-zone">&times;</div><span>{{ 'GANTRY5_PLATFORM_DROP_DELETE'|trans }}</span></div>
</form>
{% endblock %}
