{% extends 'default.html.twig' %}

{% block content %}
{% set entries = page.children %}

{# Collect GPS entries for mini-map #}
{% set map_entries = [] %}
{% for entry in entries %}
    {% if entry.header.lat is not empty and entry.header.lng is not empty %}
        {% set map_entries = map_entries|merge([{
            'lat': entry.header.lat,
            'lng': entry.header.lng,
            'title': entry.title,
            'url': entry.url
        }]) %}
    {% endif %}
{% endfor %}

{% if map_entries|length > 0 %}
<div class="feed-map-wrap">
    <div class="feed-map" id="feed-map"></div>
    <a class="feed-map-link" href="{{ base_url_absolute }}/map">View full map →</a>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<script>
var FEED_ENTRIES = {{ map_entries|json_encode|raw }};

var map = L.map('feed-map', { minZoom: 2, maxZoom: 18, zoomControl: true });
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var latLngs = FEED_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });

if (latLngs.length > 1) {
    L.polyline(latLngs, { color: '#0066cc', weight: 3, opacity: 0.7 }).addTo(map);
}

FEED_ENTRIES.forEach(function(entry, i) {
    var isLatest = (i === FEED_ENTRIES.length - 1);
    var size = isLatest ? 16 : 10;
    var color = isLatest ? '#0044aa' : '#0066cc';
    var icon = L.divIcon({
        className: '',
        html: '<div style="width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.35);cursor:pointer;"></div>',
        iconSize: [size, size],
        iconAnchor: [size/2, size/2]
    });
    L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
        .addTo(map)
        .on('click', function() { window.location = entry.url; });
});

if (latLngs.length === 1) {
    map.setView(latLngs[0], 10);
} else {
    map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
}
</script>
{% endif %}

<div class="feed">
    {% if entries|length > 0 %}
        {% for entry in entries %}
        <article class="entry-card">
            {% set hero = null %}
            {% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
                {% set hero = entry.media[entry.header.hero_image] %}
            {% elseif entry.media.images|length > 0 %}
                {% set hero = entry.media.images|first %}
            {% endif %}

            <a class="entry-card-inner" href="{{ entry.url }}">
                {% if hero %}
                <div class="entry-card-photo">
                    <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
                    <div class="entry-card-photo-overlay">
                        <time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
                            {{ entry.date|date('d M Y')|upper }}
                        </time>
                        {% if entry.header.location_city or entry.header.location_country %}
                        <span class="entry-location-overlay">
                            📍
                            {% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
                            {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
                            {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
                        </span>
                        {% endif %}
                    </div>
                </div>
                {% else %}
                <div class="entry-card-textmeta">
                    <time class="entry-date-plain" datetime="{{ entry.date|date('Y-m-d') }}">
                        {{ entry.date|date('d M Y')|upper }}
                    </time>
                    {% if entry.header.location_city or entry.header.location_country %}
                    <span class="entry-location-plain">
                        📍
                        {% if entry.header.location_city %}{{ entry.header.location_city }}{% endif %}
                        {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
                        {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
                    </span>
                    {% endif %}
                </div>
                {% endif %}

                <div class="entry-card-body">
                    <h2 class="entry-title">{{ entry.title }}</h2>
                    <p class="entry-excerpt">{{ entry.summary }}</p>
                    <span class="entry-read-more">Read entry →</span>
                </div>
            </a>
        </article>
        {% endfor %}
    {% else %}
        <p class="feed-empty">No entries yet. The journey is about to begin.</p>
    {% endif %}
</div>
{% endblock %}