{% set weather_icons = {
    'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
    'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
    'Snow': '❄️', 'Thunderstorm': '⛈️'
} %}
<article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
    <header class="journal-post-header">
        <h2 class="journal-post-title">{{ entry.title }}</h2>
        <p class="journal-post-meta">
            <a class="journal-post-permalink" href="{{ entry.url }}">
                <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
            </a>
            {% if entry.header.location_city or entry.header.location_country %}
            <span class="journal-post-location">
                · 📍
                {%- set _loc = [] -%}
                {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
                {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
                {{ _loc|join(', ') }}
            </span>
            {% endif %}
            {% if entry.header.weather_desc %}
            <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
            {% endif %}
        </p>
    </header>

    {% set images = entry.media.images %}
    {% if images|length > 0 %}
    {% set firstImg = images|first %}
    {% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
    <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
        <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}" data-slides="{{ images|length }}">
            {% for img in images %}
            <a class="journal-photo-slide"
               href="{{ img.url }}"
               data-pswp-width="{{ img.width }}"
               data-pswp-height="{{ img.height }}"
               style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
               target="_blank">
                <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
            </a>
            {% endfor %}
        </div>
        {% if images|length > 1 %}
        <div class="journal-photo-dots" aria-hidden="true">
            {% for img in images %}
            <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
            {% endfor %}
        </div>
        {% endif %}
        <button class="journal-photo-expand" aria-label="View full size">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
        </button>
    </div>
    {% endif %}

    <div class="journal-post-body">{{ entry.content|raw }}</div>
</article>