{% extends 'admin/base.html.twig' %}

{% block content %}
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <div class="row">
                    <h4 class="panel-title col-md-9">
                        {{ 'admin.menu.index.title'|trans }}
                    </h4>

                    <div class="col-md-3">
                        <a class="btn btn-success btn-quirk btn-sm pull-right"
                           href="{{ path ('admin_menu_create', {'groupId': group.id}) }}">
                            {{ 'admin.menu.index.create'|trans }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row mb15">
                    <div class="col-md-3">
                        <select class="form-control" id="group-list">
                            {% for grp in groups %}
                                <option {% if group.id == grp.id %}selected{% endif %}
                                        value="{{ path('admin_menu_index', {'groupId': grp.id}) }}">
                                    {{ grp.title }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <table class="table table-hover" id="sortable">
                    <thead>
                    <tr>
                        <th>Titre</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    {% for menuItem in menu %}
                        <tr style="cursor: move" class="first-level-item" id="{{ menuItem.item.id }}">
                            <td style="width: 80%">{{ menuItem.item.title }}</td>
                            <td>
                                <a class="btn btn-primary btn-sm btn-quirk" title="{{ 'common.action.edit'|trans }}"
                                   href="{{ path('admin_menu_edit', {'groupId': group.id, 'id': menuItem.item.id}) }}">
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                </a>
                                <a class="btn btn-danger btn-sm btn-quirk delete-message"
                                   title="{{ 'common.action.delete'|trans }}"
                                   href="{{ path('admin_menu_delete', {'groupId': group.id, 'id': menuItem.item.id}) }}">
                                    <i class="fa fa-trash" aria-hidden="true"></i></a>
                                <a class="btn btn-info btn-sm btn-quirk"
                                   title="{{ 'common.action.duplicate'|trans }}"
                                   href="{{ path('admin_menu_duplicate', {'itemId': menuItem.item.id}) }}">
                                    <i class="fa fa-clipboard" aria-hidden="true"></i></a>
                                {% if menuItem.hasChildren %}
                                    <a class="btn btn-warning btn-sm btn-quirk"
                                       title="{{ 'common.action.submenu'|trans }}"
                                       href="{{ path('admin_menu_submenu', {'groupId': group.id, 'menuId': menuItem.item.id}) }}">
                                        <i class="fa fa-indent" aria-hidden="true"></i></a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block view_js %}
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#group-list').on('change', function () {
                return window.location.href = $(this).val();
            });
        });

        $("#sortable").sortable({
            items: ".first-level-item",
            update: function (event, ui) {
                $("#sortable").sortable("disable");
                menuItemOrder = new Array();
                $('#sortable .first-level-item').each(function () {
                    menuItemOrder.push($(this).attr('id'));
                });
                $.ajax({
                    method: "POST",
                    url: "{{ path('admin_menu_order', {'groupId': group.id}) }}",
                    data: {
                        orders: menuItemOrder
                    },
                    success: function (data) {
                        $("#sortable").sortable("enable");
                    }
                });
            }
        });
    </script>
{% endblock %}