{% extends 'events/management/base.html' %}

{% from '_switch.html' import switch %}
{% from 'message_box.html' import message_box %}
{% from 'events/layout/_menu.html' import menu_entries %}

{% block page_class %}{{ super() }} wide{% endblock %}
{% block title %}
    {%- trans %}Menu{% endtrans -%}
{% endblock %}

{%- block content %}
    <div class="layout-wrapper" id="menu-customization">
        <div class="row">
            <div class="col-100">
                <div class="action-box">
                    <div class="section">
                        <div class="icon icon-wrench"></div>
                        <div class="text">
                            <div class="label">
                                {%- trans %}Customize menu{% endtrans -%}
                            </div>
                            <div>
                                {% if custom_menu_enabled %}
                                    {%- trans %}Menu customization is currently enabled. Disabling it will revert all changes.{% endtrans -%}
                                {% else %}
                                    {%- trans %}When enabling menu customization, you can re-arrange menu entries and add custom links/pages to your event.{% endtrans -%}
                                {% endif %}
                            </div>
                        </div>
                        <div class="toolbar">
                            {{ switch(id='toggle-menu-customization',
                                      checked=custom_menu_enabled,
                                      disabled=event.is_locked,
                                      data_href=url_for('.menu_toggle_custom', event),
                                      data_confirm_disable=_('Disabling menu customizations will revert to the default menu and PERMANENTLY DELETE all menu customizations including custom pages.')) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#toggle-menu-customization').ajaxCheckbox().on('ajaxCheckbox:changed', function() {
                location.reload();
            });
        </script>
        {% if custom_menu_enabled %}
            <div class="row">
                <div id="menu-entries" class="column col-50">
                    {{ menu_entries(menu, connect_menu=true) }}
                </div>
                <div class="column col-50 hide-if-locked">
                    {% call message_box('info') %}
                        {%- trans -%}
                            Click and drag the blocks to reorder the menu entries.
                        {%- endtrans -%}
                    {% endcall %}
                    <div class="action-box">
                        <div class="section">
                            <div class="icon icon-plus"></div>
                            <div class="text">
                                <div class="label">
                                    {%- trans %}Add entries{% endtrans -%}
                                </div>
                                <div>
                                    {%- trans %}Add new entries to the event menu.{% endtrans -%}
                                </div>
                            </div>
                            <div class="toolbar">
                                <div class="group js-add-entry-dropdown">
                                    <button class="i-button arrow icon-plus"
                                            data-toggle="dropdown">
                                        {%- trans %}Add an entry{% endtrans -%}
                                    </button>
                                    <ul class="i-dropdown">
                                        <li>
                                            <a class="icon-link add-link" href="#"
                                               data-href="{{ url_for('.menu_add_entry', event, type='user_link') }}"
                                               data-title="{% trans %}New link{% endtrans %}">
                                                {%- trans %}Add link{% endtrans -%}
                                            </a>
                                        </li>
                                        <li>
                                            <a class="icon-file-text add-page" href="#"
                                                data-href="{{ url_for('.menu_add_entry', event, type='page') }}"
                                                data-title="{% trans %}New page{% endtrans %}">
                                                {%- trans %}Add page{% endtrans -%}
                                            </a>
                                        </li>
                                        <li>
                                            <a class="icon-arrows-vert add-separator" href="#">
                                                {%- trans %}Add spacer{% endtrans -%}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function initMenuEdit() {
                        initMenuSortable();

                        function _addNewEntry(data, classes) {
                            if (data) {
                                $('#menu-entries > .menu-entries').append($('<li>', {
                                    'class': classes
                                }).html(data.entry));
                                initMenuSortable();
                            }
                        }

                        $('.js-add-entry-dropdown').dropdown();

                        $('.add-link, .add-page').ajaxDialog({
                            onClose: function(data) { _addNewEntry(data, 'nestable allow-nested'); }
                        });
                        $('.add-separator').on('click', function addSeparator (evt) {
                            evt.preventDefault();

                            $.ajax({
                                url: {{ url_for('.menu_add_entry', event, type='separator')|tojson }},
                                method: 'POST',
                                complete: IndicoUI.Dialogs.Util.progress(),
                                error: handleAjaxError,
                                success: function(data) { _addNewEntry(data, ''); }
                            });
                        });
                    });
                </script>
            </div>
        {% endif %}
    </div>
{% endblock %}
