{{ pageSetVar('title', 'Menu'|trans) }}
<h3>
    <span class="fas fa-list"></span>
    {% trans %}Menu{% endtrans %}
</h3>
<div class="alert alert-info">{% trans %}Right-click on the menu-item for a context menu of actions.{% endtrans %}</div>
<h4><i class="fas fa-bars"></i> {{ menu.title }} ({{ menu.id }})</h4>
<div class="alert alert-info"><i class="fas fa-check-circle"></i> {% trans %}MenuItemName (menuItemId). The id is needed for permissions.{% endtrans %}</div>
<div id="tree_container">
    {{ tree|raw }}
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">{% trans %}Edit item{% endtrans %}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="{% trans %}Close{% endtrans %}"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" value="Submit" class="btn btn btn-success"><i class="fas fa-check"></i> {% trans %}Save{% endtrans %}</button>
                <button type="button" value="Cancel" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> {% trans %}Cancel{% endtrans %}</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">{% trans %}Confirmation prompt{% endtrans %}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="{% trans %}Close{% endtrans %}"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <p>{% trans %}Do you really want to delete this item?{% endtrans %}
                <p id="deleteWithChildrenInfo"></p>
            </div>
            <div class="modal-footer">
                <button type="button" id="node_delete" value="Delete" class="btn btn-danger"><i class="fas fa-trash-alt"></i> {% trans %}Delete{% endtrans %}</button>
                <button type="button" id="node_delete_all" value="Delete" class="btn btn-danger d-none"><i class="fas fa-trash-alt"></i> {% trans %}Delete all children{% endtrans %}</button>
                <button type="button" id="node_delete_move" value="DeleteAndMoveChildren" class="btn btn-danger d-none">{% trans %}Move all children{% endtrans %}</button>
                <button type="button" id="node_delete_move_action" value="DeleteAndMoveChildren" class="btn btn-danger d-none">{% trans %}Move and delete{% endtrans %}</button>
                <button type="button" id="node_cancel" value="Cancel" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> {% trans %}Cancel{% endtrans %}</button>
            </div>
        </div>
    </div>
</div>
{{ pageAddAsset('javascript', asset('jstree/dist/jstree.min.js')) }}
{{ pageAddAsset('stylesheet', asset('jstree/dist/themes/default/style.min.css')) }}
{{ pageAddAsset('stylesheet', zasset('@ZikulaThemeModule:css/jstree.Common.css')) }}
{{ pageAddAsset('javascript', zasset('@ZikulaMenuModule:js/ZikulaMenuModule.Admin.View.js')) }}
{{ pageAddAsset('javascript', zasset('@ZikulaMenuModule:js/Zikula.Menu.Node.Edit.js')) }}