{% extends "base.html.twig" %}

{% block body %}
    <h1 class="page-header">
    menus
    </h1>

    {% for menu in menus %}
        <div class="card mb-3">
            <div class="card-header">
                {{menu.name}}
                <a class="btn float-end" href="{{ path('app_menu_submit',{id:menu.id}) }}" title='Ajouter une entrée au menu'><i class="fas fa-plus"></i></a>
            </div>
            <ul class="list-menu list-group list-group-flush">
                {% for menuchild in menu.menuchilds %}
                    <div class="item-menu list-group-item d-flex" data-id={{menuchild.id}}>
                        <i class="fa fa-arrows-up-down fa-2x fa-fw me-1"></i>
                        <div class="me-auto">
                            {% if menuchild.childtype == "blog" %}
                            {{menuchild.blog.name}}
                            {% elseif menuchild.childtype == "blogtype" %}
                            {{menuchild.blogtype.name}}
                            {% elseif menuchild.childtype == "page" %}
                            {{menuchild.page.name}}
                            {% elseif menuchild.childtype == "pagetype" %}
                            {{menuchild.pagetype.name}}
                            {% endif %}
                            <br><small>{{menuchild.childtype}}</small>
                        </div>
                        <a href="{{ path('app_menu_delete', { id: menuchild.id }) }}" class="ms-3">
                            <i class="fas fa-trash fa-2x"></i>
                        </a>                        
                    </div>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
{% endblock %}

{% block localscript %}
<script>
    function updateOrder() {
        $('.item-menu').each(function(i) {
            var id = $(this).data('id');

            url="{{ path('app_menu_order',{id:'xxx',order:'yyy'}) }}";
            url=url.replace('xxx',id);
            url=url.replace('yyy',i);
            // Mise à jour en base de l'order
            $.ajax({
                method: "POST",
                url: url,
            });
        });
    }

    $( ".list-menu" ).sortable({
        axis: "y",
        update: updateOrder
    });
</script>
{% endblock %}