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

{% block title %}Mahlzeiten · svc-essensplanung{% endblock %}

{% block body %}
    <div class="card">
        <div class="row-between">
            <div>
                <h1 style="margin: 0;">Mahlzeiten</h1>
                <div class="muted" style="margin-top: 0.2rem;">Planungsliste – per Drag &amp; Drop sortieren</div>
            </div>
            <div class="actions">
                <a class="btn" href="{{ path('mahlzeiten_neu') }}">+ Neue Mahlzeit</a>
                <a class="btn btn-link" href="{{ path('mahlzeiten_inspiration') }}">Inspiration</a>
                <a class="btn btn-link" href="{{ path('mahlzeiten_tage') }}">Tagesansicht</a>
                <a class="btn btn-link" href="{{ path('mahlzeiten_archiv') }}">Archiv</a>
            </div>
        </div>

        {% if total == 0 %}
            <p class="muted" style="margin-top: 1rem;">Noch keine Mahlzeiten in der Planung.</p>
        {% else %}
            <ul class="list sortierbar">
                {% for m in mahlzeiten %}
                    {{ include('mahlzeiten/_mahlzeit.html.twig', { m: m, sortierbar: true }) }}
                {% endfor %}
            </ul>
        {% endif %}
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/sortable.min.js') }}"></script>
    <script>
        (function () {
            const liste = document.querySelector('ul.sortierbar');
            if (!liste || typeof Sortable === 'undefined') { return; }
            const url = '{{ path("mahlzeiten_reorder") }}';
            Sortable.create(liste, {
                handle: '.drag-handle',
                animation: 150,
                ghostClass: 'item-drag',
                onEnd: function () {
                    const ids = Array.prototype.map.call(
                        liste.querySelectorAll('li[data-id]'),
                        function (li) { return Number(li.getAttribute('data-id')); }
                    );
                    fetch(url, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ ids: ids }),
                    }).then(function (antwort) {
                        if (!antwort.ok) { window.location.reload(); }
                    }).catch(function () { window.location.reload(); });
                },
            });
        })();
    </script>
{% endblock %}