{% import 'macros/stats.html.twig' as stats_m %}
{% import 'macros/cycling.html.twig' as cycling_m %}
<div class="home-feed-col">
    <div class="home-trip-header">
        <h1 class="home-trip-name">{{ trip_page.title }}</h1>
        {% if trip_page.header.date_start %}
        <p class="trip-dates">
            {{ trip_page.header.date_start|date('d M Y') }}
            {% if trip_page.header.date_end %} — {{ trip_page.header.date_end|date('d M Y') }}{% else %} — Ongoing{% endif %}
        </p>
        {% endif %}
        <span class="home-trip-counts">
            {{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
            {% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
        </span>
        <div class="trip-filter-bar">
            <div class="trip-filter-group">
                <button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
                <button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
                <button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
            </div>
            {% if show_sort %}
            <button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑</button>
            {% endif %}
        </div>
        <div class="trip-panel-toggles">
            <button class="trip-panel-toggle" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
            {% if has_gpx %}
            <button class="trip-panel-toggle" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling <span class="trip-panel-caret" aria-hidden="true">▾</span></button>
            {% endif %}
        </div>
    </div>

    {{ stats_m.stats_panel(journal_entries, trip_page, journal_count, has_gpx) }}

    {% if has_gpx %}
    {{ cycling_m.cycling_panel() }}
    {% endif %}

    <div class="feed">
        {% if all_items|length > 0 %}
            {% for item in all_items %}
                {% set entry = item.page %}
                {% if item.type == 'journal' %}
                    {% include 'partials/entry-journal.html.twig' %}
                {% else %}
                    {% include 'partials/entry-story.html.twig' %}
                {% endif %}
            {% endfor %}
        {% else %}
            <p class="feed-empty">No entries yet. The journey is about to begin.</p>
        {% endif %}
        <p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        initTripStats({
            gpxUrls:   {{ gpx_urls|json_encode|raw }},
            gpsPoints: {{ gps_points|json_encode|raw }},
            hasGpx:    {{ has_gpx ? 'true' : 'false' }}
        });
    });
    </script>
</div>