{% extends 'partials/base.html.twig' %}

{% block content %}
{% set stories = page.children.published().order('date', 'asc') %}

<div class="stories-listing">
    <h1 class="stories-listing__heading">Stories</h1>

    {% if stories|length > 0 %}
    <div class="stories-grid">
        {% for story in stories %}
        {% set hero = null %}
        {% if story.header.hero_image and story.media[story.header.hero_image] is defined %}
            {% set hero = story.media[story.header.hero_image] %}
        {% endif %}

        {% set date_str = story.date|date('d M Y') %}
        {% if story.header.end_date %}
            {% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
        {% endif %}

        <a class="story-card" href="{{ story.url }}">
            {% if hero %}
            <div class="story-card__photo">
                <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
            </div>
            {% else %}
            <div class="story-card__photo story-card__photo--empty"></div>
            {% endif %}
            <div class="story-card__body">
                <time class="story-card__date" datetime="{{ story.date|date('Y-m-d') }}">{{ date_str }}</time>
                {% if story.header.location_name %}
                <span class="story-card__location">📍 {{ story.header.location_name }}{% if story.header.location_country %}, {{ story.header.location_country }}{% endif %}</span>
                {% endif %}
                <h2 class="story-card__title">{{ story.title }}</h2>
                <span class="story-card__cta">Read story →</span>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <p class="stories-empty">No stories yet — check back soon.</p>
    {% endif %}
</div>
{% endblock %}