{#
    Mahlzeiten-Partial (eine Zeile). Wird in Planungsliste/Tagesansicht/Archiv
    eingebunden und als htmx-Fragment von den CheckOff/Uncheck-Endpunkten
    zurückgeliefert (htmx ersetzt per hx-swap="outerHTML" genau diese <li>).

     @param MahlzeitResponse m
     @param bool sortierbar optional: zeigt Drag-Handle + Auf/Ab-Buttons + data-id (Planungsliste)
 #}
<li class="item {{ m.status.value == 'gegessen' ? 'item-gegessen' : '' }}" id="mahlzeit-{{ m.id }}"
    {% if sortierbar is defined and sortierbar %}data-id="{{ m.id }}"{% endif %}>
    <div class="item-main">
        {% if sortierbar is defined and sortierbar %}
            <span class="drag-handle" title="Ziehen zum Sortieren" aria-hidden="true">
                <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
                    <circle cx="5.5" cy="3" r="1.4"/><circle cx="10.5" cy="3" r="1.4"/>
                    <circle cx="5.5" cy="8" r="1.4"/><circle cx="10.5" cy="8" r="1.4"/>
                    <circle cx="5.5" cy="13" r="1.4"/><circle cx="10.5" cy="13" r="1.4"/>
                </svg>
            </span>
            <span class="updown">
                <button type="button" class="updown-btn" data-dir="-1" aria-label="Nach oben verschieben">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m6 15 6-6 6 6"/>
                    </svg>
                </button>
                <button type="button" class="updown-btn" data-dir="1" aria-label="Nach unten verschieben">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </button>
            </span>
        {% endif %}
        <div class="item-name">
            <strong>{{ m.name }}</strong>
            {% if m.notiz != '' %}
                <div class="notiz">{{ m.notiz }}</div>
            {% endif %}
            {% if m.wochentage|length > 0 %}
                <div class="tags">
                    {% for tag in m.wochentage %}
                        <span class="tag tag-{{ tag.value }}">{{ tag.name }}</span>
                    {% endfor %}
                </div>
            {% endif %}
            <span class="status {{ m.status.value == 'gegessen' ? 'status-gegessen' : '' }}">
                {{ m.status.value == 'gegessen' ? 'gegessen' : 'geplant' }}
                {% if m.status.value == 'gegessen' and m.gegessenAm %}
                    · {{ m.gegessenAm|date('d.m.Y H:i') }}
                {% endif %}
            </span>
        </div>
    </div>
    <div class="actions">
        <div class="action-haupt">
            {% if m.status.value == 'geplant' %}
                <button type="button" class="btn"
                        hx-post="{{ path('mahlzeiten_checkoff', { id: m.id }) }}"
                        hx-target="#mahlzeit-{{ m.id }}"
                        hx-swap="outerHTML">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4.5 12.5 9.5 17.5 19.5 6.5"/>
                    </svg>
                    Abhaken
                </button>
            {% else %}
                <button type="button" class="btn btn-link"
                        hx-post="{{ path('mahlzeiten_uncheck', { id: m.id }) }}"
                        hx-target="#mahlzeit-{{ m.id }}"
                        hx-swap="outerHTML">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M9 14 4 9l5-5"/>
                        <path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/>
                    </svg>
                    Aufheben
                </button>
            {% endif %}
        </div>
        <div class="action-neben">
            <a class="btn btn-link" href="{{ path('mahlzeiten_bearbeiten', { id: m.id }) }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M12 20h9"/>
                    <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>
                </svg>
                Bearbeiten
            </a>
            <form method="post" action="{{ path('mahlzeiten_loeschen', { id: m.id }) }}"
                  onsubmit="return confirm('Mahlzeit „{{ m.name }}“ wirklich löschen?');">
                <button type="submit" class="btn btn-danger">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M3 6h18"/>
                        <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                        <path d="M10 11v6M14 11v6"/>
                    </svg>
                    Löschen
                </button>
            </form>
        </div>
    </div>
</li>