{% extends 'public/walk_the_line/base.html.twig' %}

{% block title %}Dates — Walk The Line{% endblock %}
{% block description %}Les prochaines dates de Walk The Line, concert solo consacré à Johnny Cash, et les archives des concerts passés.{% endblock %}

{% block structured_data %}
    {{ parent() }}
    {% if upcoming is not empty %}
    <script type="application/ld+json">{{ upcoming|map(date => {
        '@context': 'https://schema.org',
        '@type': 'MusicEvent',
        'name': date.publicTitle ?: (project.publicName ?: project.name),
        'startDate': date.eventDate ? date.eventDate|date('c') : null,
        'eventStatus': 'https://schema.org/EventScheduled',
        'eventAttendanceMode': 'https://schema.org/OfflineEventAttendanceMode',
        'location': date.venue and (date.showPublicVenue or date.showPublicCity) ? {
            '@type': 'Place',
            'name': date.showPublicVenue ? date.venue.name : (date.showPublicCity ? date.venue.city : null),
            'address': date.showPublicCity ? {
                '@type': 'PostalAddress',
                'addressLocality': date.venue.city,
                'addressCountry': date.venue.country
            } : null
        } : null,
        'performer': {
            '@type': 'MusicGroup',
            'name': project.publicName ?: project.name
        },
        'url': app.request.schemeAndHttpHost ~ path('site_wtl_dates')
    })|json_encode(constant('JSON_UNESCAPED_SLASHES') b-or constant('JSON_UNESCAPED_UNICODE'))|raw }}</script>
    {% endif %}
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/public/walk-the-line/dates.css') }}">
{% endblock %}

{% block body %}
{% include 'public/walk_the_line/partials/_header.html.twig' %}

{% set datesPhotos = {heroDesktop: 'images/public/walk-the-line/shooting/AR25.jpg', heroMobile: 'images/public/walk-the-line/shooting/AR26.jpg', breath: 'images/public/walk-the-line/shooting/AR34.jpg'} %}

<main class="dates-page" id="top">
    <section class="dates-hero">
        <div class="dates-hero-no" aria-hidden="true">01 / 05</div>
        <div class="dates-hero-ghost" aria-hidden="true">ROAD</div>

        <div class="dates-hero-copy" data-reveal>
            <p class="wtl-eyebrow">On the road · Walk The Line</p>
            <h1><span>NEXT</span><strong>SHOWS.</strong></h1>
            <p class="dates-hero-lead">La route continue.<br><em>Chaque date trace une nouvelle ligne.</em></p>
        </div>

        {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: datesPhotos.heroDesktop, mobileSrc: datesPhotos.heroMobile, alt: 'Walk The Line marchant le long d’une voie ferrée', mode: 'graphic', class: 'dates-hero-image', position: '50% 54%', loading: 'eager', reveal: true} only %}

        <div class="dates-hero-note" data-reveal>
            <span></span>
            <p>France · Belgique · Suisse</p>
        </div>

        <a class="wtl-scroll-cue" href="#upcoming"><span>Voir les dates</span><i aria-hidden="true"></i></a>
    </section>

    <section class="dates-upcoming" id="upcoming">
        <div class="dates-section-no" aria-hidden="true">02</div>
        <header class="dates-section-head" data-reveal>
            <p class="wtl-kicker">Prochainement</p>
            <h2>À venir.</h2>
            <p>Un lieu, une ville, une soirée. Le reste se joue sur scène.</p>
        </header>

        {% set monthLabelsLong = ['JANVIER', 'FÉVRIER', 'MARS', 'AVRIL', 'MAI', 'JUIN', 'JUILLET', 'AOÛT', 'SEPTEMBRE', 'OCTOBRE', 'NOVEMBRE', 'DÉCEMBRE'] %}
        {% if upcoming is not empty %}
            <div class="dates-list">
                {% for concert in upcoming %}
                    {% set concertUrl = concert.ticketUrl ?: concert.bookingUrl ?: concert.externalUrl %}
                    {% set isCancelled = concert.status == 'cancelled' %}
                    <article class="dates-row{% if concert.featured %} is-featured{% endif %}{% if isCancelled %} is-cancelled{% endif %}" data-reveal>
                        <div class="dates-row-date">
                            <time datetime="{{ concert.eventDate|date('Y-m-d') }}">
                                <b>{{ concert.eventDate|date('d') }}</b>
                                <span>{{ monthLabelsLong[concert.eventDate|date('n') - 1] }}</span>
                                <small>{{ concert.eventDate|date('Y') }}</small>
                            </time>
                        </div>

                        <div class="dates-row-main">
                            {% if concert.showPublicCity %}<p class="dates-row-city">{{ concert.venue.city }}{% if concert.venue.country and concert.venue.country != 'France' %} · {{ concert.venue.country }}{% endif %}</p>{% endif %}
                            <h3>{{ concert.publicTitle ?: (concert.showPublicVenue ? concert.venue.name : (project.publicName ?: project.name)) }}</h3>
                            {% if concert.publicTitle and concert.showPublicVenue %}<p class="dates-row-venue">{{ concert.venue.name }}</p>{% endif %}
                            {% if concert.publicDescription %}<p class="dates-row-desc">{{ concert.publicDescription }}</p>{% endif %}
                        </div>

                        <div class="dates-row-meta">
                            {% if concert.startTime %}<span>{{ concert.startTime|date('H:i') }}</span>{% endif %}
                            {% if concert.soldOut %}<strong>COMPLET</strong>{% endif %}
                            {% if concert.postponed %}<strong>REPORTÉ</strong>{% endif %}
                            {% if isCancelled %}<strong>ANNULÉ</strong>{% endif %}
                            {% if concert.featured %}<small>À LA UNE</small>{% endif %}
                        </div>

                        <div class="dates-row-action">
                            {% if concertUrl and not isCancelled %}
                                <a href="{{ concertUrl }}" target="_blank" rel="noopener noreferrer">Infos / réservation <span>↗</span></a>
                            {% elseif isCancelled %}
                                <span>Concert annulé</span>
                            {% endif %}
                        </div>
                    </article>
                    {% if concert.postponed and concert.showPostponementNotice and concert.postponementMessage %}
                        <div class="dates-notice" data-reveal>{{ concert.postponementMessage }}</div>
                    {% endif %}
                {% endfor %}
            </div>
        {% else %}
            <div class="dates-empty" data-reveal>
                <div class="dates-empty-mark" aria-hidden="true">—</div>
                <div>
                    <p class="wtl-kicker">Stay tuned</p>
                    <h3>Les prochaines dates arrivent.</h3>
                    <p>En attendant, la route continue en coulisses.</p>
                </div>
            </div>
        {% endif %}
    </section>

    <section class="dates-road-breath" aria-label="On the road">
        {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: datesPhotos.breath, alt: 'Route et paysage photographiés pour Walk The Line', mode: 'native', class: 'dates-road-breath-image', reveal: true} only %}
        <div class="dates-road-breath-copy" data-reveal aria-hidden="true"><span>ON THE</span><strong>ROAD.</strong></div>
    </section>

    <section class="dates-archives" id="archives">
        <div class="dates-section-no" aria-hidden="true">04</div>
        <div class="dates-archives-ghost" aria-hidden="true">PAST</div>
        <header class="dates-archives-head" data-reveal>
            <p class="wtl-kicker">Sur la ligne</p>
            <h2>Les dates passent.<br><em>La trace reste.</em></h2>
        </header>

        {% if archives is not empty %}
            <div class="dates-list dates-list-archives">
                {% for concert in archives %}
                    {% set isCancelled = concert.status == 'cancelled' %}
                    <article class="dates-row dates-row-archive{% if isCancelled %} is-cancelled{% endif %}" data-reveal>
                        <div class="dates-row-date">
                            <time datetime="{{ concert.eventDate|date('Y-m-d') }}">
                                <b>{{ concert.eventDate|date('d') }}</b>
                                <span>{{ monthLabelsLong[concert.eventDate|date('n') - 1] }}</span>
                                <small>{{ concert.eventDate|date('Y') }}</small>
                            </time>
                        </div>

                        <div class="dates-row-main">
                            {% if concert.showPublicCity %}<p class="dates-row-city">{{ concert.venue.city }}{% if concert.venue.country and concert.venue.country != 'France' %} · {{ concert.venue.country }}{% endif %}</p>{% endif %}
                            <h3>{{ concert.publicTitle ?: (concert.showPublicVenue ? concert.venue.name : (project.publicName ?: project.name)) }}</h3>
                            {% if concert.publicTitle and concert.showPublicVenue %}<p class="dates-row-venue">{{ concert.venue.name }}</p>{% endif %}
                            {% if concert.publicDescription %}<p class="dates-row-desc">{{ concert.publicDescription }}</p>{% endif %}
                        </div>

                        <div class="dates-row-meta">
                            {% if concert.startTime %}<span>{{ concert.startTime|date('H:i') }}</span>{% endif %}
                        </div>

                        <div class="dates-row-action" aria-hidden="true"></div>
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <p class="dates-archives-empty" data-reveal>Les archives publiques apparaîtront ici au fil des concerts.</p>
        {% endif %}
    </section>

    <section class="wtl-booking dates-home-booking" id="booking">
        <div class="wtl-booking-copy" data-reveal>
            <p class="wtl-kicker">Programmation / Presse</p>
            <h2><span>Bring the</span><br><em>black</em><br><span>to your stage.</span></h2>
        </div>

        <div class="wtl-booking-meta" data-reveal>
            <p>Une forme solo voix / guitare, légère et adaptable, qui peut être accueillie dans un lieu intimiste comme sur un plateau équipé. La musique reste au centre ; le récit, la lumière et les images servent les chansons, jamais l’inverse.</p>
            {% if project.bookingEmail or project.contactEmail %}
                <a class="wtl-booking-mail" href="mailto:{{ project.bookingEmail ?: project.contactEmail }}">{{ project.bookingEmail ?: project.contactEmail }} <span>↗</span></a>
            {% else %}
                <a class="wtl-booking-mail" href="{{ path('site_wtl_contact') }}">Contact programmation <span>↗</span></a>
            {% endif %}
            <div class="wtl-booking-links">
                <a href="#upcoming">Dates à venir</a>
                <a href="#archives">Archives</a>
                <a href="{{ path('site_wtl_media') }}">Médias</a>
                <a href="{{ path('site_home') }}">Accueil</a>
            </div>
        </div>

        <div class="wtl-footer-mark" aria-hidden="true">WTL</div>
        <footer>
            <span>WALK THE LINE</span>
            <span>JOHNNY CASH · AUTREMENT</span>
            <span>© {{ 'now'|date('Y') }}</span>
            {% include 'public/walk_the_line/partials/_legal_links.html.twig' %}
</footer>
    </section>
</main>
{% endblock %}