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

{% block content %}
{% set weather_icons = {
    'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
    'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
    'Snow': '❄️', 'Thunderstorm': '⛈️'
} %}

{% set hero = null %}
{% if page.header.hero_image and page.media[page.header.hero_image] is defined %}
    {% set hero = page.media[page.header.hero_image] %}
{% elseif page.media.images|length > 0 %}
    {% set hero = page.media.images|first %}
{% endif %}

<article class="entry">
    {% if hero %}
    <div class="entry-hero">
        <img src="{{ hero.cropResize(1440, 720).url }}" alt="{{ page.title }}" loading="eager">
    </div>
    {% endif %}

    <header class="entry-header">
        <div class="entry-header-meta">
            <time class="entry-date" datetime="{{ page.date|date('Y-m-d') }}">
                {{ page.date|date('l, d F Y') }}
            </time>
            {% if page.header.location_city or page.header.location_country %}
            <p class="entry-location">
                📍
                {% if page.header.location_city %}{{ page.header.location_city }}{% endif %}
                {% if page.header.location_city and page.header.location_country %}, {% endif %}
                {% if page.header.location_country %}{{ page.header.location_country }}{% endif %}
            </p>
            {% endif %}
            {% if page.header.weather_desc or page.header.weather_temp_c %}
            <p class="entry-weather">
                {% if page.header.weather_desc %}
                    {{ weather_icons[page.header.weather_desc] ?? '🌡️' }} {{ page.header.weather_desc }}
                {% endif %}
                {% if page.header.weather_temp_c %}
                    · {{ page.header.weather_temp_c|round }}°C
                {% endif %}
            </p>
            {% endif %}
        </div>

        <h1 class="entry-title">{{ page.title }}</h1>
        <div class="entry-title-rule"></div>
    </header>

    <div class="entry-body">
        {{ page.content }}
    </div>

    {% set images = page.media.images %}
    {% if images|length > 0 %}
    <div class="entry-gallery" id="entry-gallery">
        {% for image in images %}
        <button class="gallery-thumb" data-full="{{ image.url }}" data-alt="{{ image.filename }}" aria-label="View {{ image.filename }}">
            <img src="{{ image.cropResize(300, 300).url }}" alt="{{ image.filename }}" loading="lazy">
        </button>
        {% endfor %}
    </div>

    <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Photo viewer" hidden>
        <button class="lightbox-close" id="lb-close" aria-label="Close">✕</button>
        <button class="lightbox-prev" id="lb-prev" aria-label="Previous">‹</button>
        <img class="lightbox-img" id="lb-img" src="" alt="">
        <button class="lightbox-next" id="lb-next" aria-label="Next">›</button>
    </div>

    <script>
    (function() {
        var gallery = document.getElementById('entry-gallery');
        var lightbox = document.getElementById('lightbox');
        var lbImg = document.getElementById('lb-img');
        var thumbs = Array.from(gallery.querySelectorAll('.gallery-thumb'));
        var current = 0;

        function open(index) {
            current = index;
            var btn = thumbs[index];
            lbImg.src = btn.dataset.full;
            lbImg.alt = btn.dataset.alt;
            lightbox.hidden = false;
            document.body.style.overflow = 'hidden';
            document.getElementById('lb-close').focus();
        }

        function close() {
            lightbox.hidden = true;
            document.body.style.overflow = '';
            thumbs[current].focus();
        }

        function prev() { open((current - 1 + thumbs.length) % thumbs.length); }
        function next() { open((current + 1) % thumbs.length); }

        thumbs.forEach(function(btn, i) {
            btn.addEventListener('click', function() { open(i); });
        });

        document.getElementById('lb-close').addEventListener('click', close);
        document.getElementById('lb-prev').addEventListener('click', prev);
        document.getElementById('lb-next').addEventListener('click', next);

        lightbox.addEventListener('click', function(e) {
            if (e.target === lightbox) close();
        });

        document.addEventListener('keydown', function(e) {
            if (lightbox.hidden) return;
            if (e.key === 'Escape') close();
            if (e.key === 'ArrowLeft') prev();
            if (e.key === 'ArrowRight') next();
        });
    })();
    </script>
    {% endif %}

    <footer class="entry-footer">
        <a href="{{ base_url_absolute }}/tracker">← Back to journal</a>
    </footer>
</article>
{% endblock %}