{#
  Feed mini-map partial — shared by dailies.html.twig and stories.html.twig.

  Required variables (via {% include ... with {...} only %}):
    map_entries  — array: [{lat, lng, title, slug, url, type, force_connect, transport_mode}]
    map_id       — string: HTML id for the map div (e.g. 'feed-map', 'stories-map')
    map_var      — string: JS variable name for the MapLibre Map (e.g. 'feedMap', 'storiesMap')
    link_href    — string|null: URL for "View full map" link; null/empty hides the link
    card_prefix  — string: prefix for scroll-to card IDs ('entry-' or 'story-')
    trip_page    — Grav page: trip page for autoconnect setting (used when show_journey is true)
    show_journey — bool: whether to draw the route connector line between markers
#}
{% if map_entries|length > 0 %}
<div class="feed-map-wrap">
    <div class="feed-map" id="{{ map_id }}">
        <button class="feed-map-fullscreen-btn" id="{{ map_id }}-fullscreen" aria-label="Expand map">
            <svg class="feed-map-fs-open" aria-hidden="true" width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                <path d="M0 0v4h1.5V1.5H4V0z M14 0H10v1.5h2.5V4H14z M0 14v-4h1.5v2.5H4V14z M14 14H10v-1.5h2.5V10H14z"/>
            </svg>
            <span class="feed-map-fs-close" aria-hidden="true">✕</span>
        </button>
    </div>
    {% if link_href %}
    <a class="feed-map-link" href="{{ link_href }}">View full map →</a>
    {% endif %}
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
<script>
{% set js_suffix = map_id|replace({'-': '_'})|upper %}
var MAP_ENTRIES_{{ js_suffix }} = {{ map_entries|json_encode|raw }};
{% if show_journey %}
{% set _ac = trip_page ? (trip_page.header.autoconnect ?? 'on') : 'on' %}
var AUTOCONNECT_{{ js_suffix }} = "{{ _ac == 'intelligent_gpx' ? 'on' : _ac }}";
{% endif %}

var {{ map_var }} = new maplibregl.Map({
    container: '{{ map_id }}',
    style: MapUtils.MAP_STYLE,
    center: [20, 20],
    zoom: 2,
    attributionControl: false
});
{{ map_var }}.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');

{{ map_var }}.on('load', function () {
    var attrib = {{ map_var }}.getContainer().querySelector('.maplibregl-ctrl-attrib');
    if (attrib) attrib.removeAttribute('open');

    var bounds = new maplibregl.LngLatBounds();
    var entries = MAP_ENTRIES_{{ js_suffix }};

    entries.forEach(function (entry, i) {
        var isLatest = (entry.type !== 'story') && (i === entries.length - 1);
        var lngLat   = [parseFloat(entry.lng), parseFloat(entry.lat)];
        bounds.extend(lngLat);

        var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
        el.dataset.url = entry.url;
        var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
            .setLngLat(lngLat)
            .setHTML('<span class="map-tip">' + entry.title + '</span>');
        el.addEventListener('mouseenter', function () { popup.addTo({{ map_var }}); });
        el.addEventListener('mouseleave', function () { popup.remove(); });

        el.addEventListener('click', function () {
            var card = document.getElementById('{{ card_prefix }}' + entry.slug);
            var mapWrap = document.querySelector('.feed-map-wrap');
            var isFs = mapWrap && mapWrap.classList.contains('is-fullscreen');
            function scrollAndHighlight() {
                if (!card) { window.location.href = entry.url; return; }
                window.location.hash = '{{ card_prefix }}' + entry.slug;
                setTimeout(function () {
                    card.classList.add('is-highlighted');
                    setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
                }, 350);
            }
            if (isFs) {
                var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
                if (fsBtn) fsBtn.click();
                setTimeout(scrollAndHighlight, 450);
            } else {
                scrollAndHighlight();
            }
        });

        new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo({{ map_var }});
    });

    if (entries.length === 1) {
        {{ map_var }}.jumpTo({ center: [parseFloat(entries[0].lng), parseFloat(entries[0].lat)], zoom: 10 });
    } else {
        {{ map_var }}.fitBounds(bounds, { padding: 60, maxZoom: 11 });
    }

    {% if show_journey %}
    var segments = MapUtils.buildJourneySegments(entries, { connectMode: AUTOCONNECT_{{ js_suffix }} });
    MapUtils.addJourneySegments({{ map_var }}, segments, '{{ map_id }}-journey');
    {% endif %}
});
</script>
<script>
(function() {
    var fsBtn = document.getElementById('{{ map_id }}-fullscreen');
    var mapWrap = document.querySelector('.feed-map-wrap');
    if (!fsBtn || !mapWrap) return;
    fsBtn.addEventListener('click', function() {
        var isFs = mapWrap.classList.toggle('is-fullscreen');
        fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
        document.body.style.overflow = isFs ? 'hidden' : '';
        setTimeout(function() { typeof {{ map_var }} !== 'undefined' && {{ map_var }}.resize(); }, 50);
    });
})();
</script>
{% endif %}