<div id="trip-parks" class="space-y-2">
{% if trip_parks %}
    {% for park in trip_parks %}
        {% include 'parks/partials/trip_park_item.html' with park=park %}
    {% endfor %}
{% else %}
    <div id="empty-trip" class="text-center py-8 text-gray-500">
        <i class="fas fa-route text-3xl mb-3"></i>
        <p>Add parks to start planning your trip</p>
        <p class="text-sm mt-1">Search above or click parks on the map</p>
    </div>
{% endif %}
</div>

<script>
document.addEventListener('htmx:load', function () {
    const el = document.getElementById('trip-parks');
    if (!el) return;
    if (el.dataset.sortableInit) return;
    if (typeof Sortable === 'undefined' || typeof htmx === 'undefined') return;
    el.dataset.sortableInit = '1';
    const sorter = new Sortable(el, {
        animation: 150,
        handle: '.draggable-item',
        onEnd: function () {
            const order = Array.from(el.querySelectorAll('[data-park-id]')).map(function (n) {
                return n.dataset.parkId;
            });
            htmx.ajax('POST', '{% url "parks:htmx_reorder_parks" %}', { values: { 'order[]': order } });
        },
    });
    el._tripSortable = sorter;
});
</script>
