{% import 'macros/stats.html.twig' as stats_m %}
{% import 'macros/cycling.html.twig' as cycling_m %}
{% import 'macros/cover.html.twig' as cover %}
{# trip_header_extras: gated one-liner + description + banner for the trip-page
   caller only. Home's active-trip include omits it (`only`), so it defaults off
   and that header renders exactly as before (KTD4 / R12). #}
{% set trip_header_extras = trip_header_extras|default(false) %}
<div class="home-feed-col">
    <div class="home-trip-header">
        <h1 class="home-trip-name">{{ trip_page.title }}</h1>
        {% if trip_header_extras and trip_page.header.tagline %}
        <p class="home-trip-tagline">{{ trip_page.header.tagline }}</p>
        {% endif %}
        {% 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>
        {% if trip_header_extras and trip_page.content|striptags|trim %}
        <div class="trip-header-desc" data-collapsed="true">
            <div class="trip-header-desc-body">{{ trip_page.content|raw }}</div>
            <button type="button" class="trip-header-desc-toggle" aria-expanded="false">Read more</button>
        </div>
        {% endif %}
        {% if trip_header_extras %}
        {{ cover.render(trip_page, trip_page.title, 720, 220, 'trip-header-banner', '100vw') }}
        {% endif %}
        <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>
    {% if trip_header_extras %}
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.trip-header-desc').forEach(function (desc) {
            var body = desc.querySelector('.trip-header-desc-body');
            var btn  = desc.querySelector('.trip-header-desc-toggle');
            if (!body || !btn) return;
            // Drop the toggle when the description already fits the collapsed preview.
            if (body.scrollHeight <= body.clientHeight + 4) {
                btn.hidden = true;
                desc.removeAttribute('data-collapsed');
                return;
            }
            btn.addEventListener('click', function () {
                var collapsed = desc.getAttribute('data-collapsed') === 'true';
                desc.setAttribute('data-collapsed', collapsed ? 'false' : 'true');
                btn.setAttribute('aria-expanded', collapsed ? 'true' : 'false');
                btn.textContent = collapsed ? 'Show less' : 'Read more';
            });
        });
    });
    </script>
    {% endif %}
</div>