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

{% block title %}{{ 'stories.title'|trans }}{% endblock %}

{% block body %}
    <section class="section">
        <div class="container">
            <h2 class="section-title">{{ 'stories.heading'|trans|raw }}{% if selectedYear %} — {{ selectedYear }}{% endif %}</h2>
            <div class="title-bar"></div>
            <p class="section-sub">{{ 'stories.sub'|trans }}</p>

            {% if selectedYear %}
                <p><a class="card-link" href="{{ path('app_stories') }}">← {{ 'nav.stories_all'|trans }}</a></p>
            {% endif %}

            {% if cases is empty %}
                <p style="color: var(--grey);">{{ 'stories.empty'|trans }}</p>
            {% else %}
                <div class="card-grid">
                    {% for case in cases %}
                        <article class="card">
                            <div class="card-img" {% if case.imageName %}style="background-image: url('{{ vich_uploader_asset(case, 'imageFile') }}')"{% endif %}>
                                {% if not case.imageName %}<div class="placeholder">🕯️</div>{% endif %}
                            </div>
                            <div class="card-body">
                                <div class="card-meta">
                                    📍 {{ case.location }}
                                    {% if case.incidentDate %} — {{ case.incidentDate|date('d/m/Y') }}{% endif %}
                                </div>
                                <h3><a href="{{ path('app_story_show', {id: case.id}) }}">{{ case.victimName }}{% if case.victimAge %}, {{ case.victimAge }} {{ 'common.age_suffix'|trans }}{% endif %}</a></h3>
                                <p>{{ case.getLocalizedStoryContent(app.request.locale)|striptags|slice(0, 160) }}…</p>
                                <a class="card-link" href="{{ path('app_story_show', {id: case.id}) }}">{{ 'stories.read_story'|trans }} <span class="dir-arrow">→</span></a>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </section>
{% endblock %}