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

{% block title %}Médias — Walk The Line{% endblock %}
{% block description %}Images, sessions live et extraits de Walk The Line, concert solo consacré à Johnny Cash.{% endblock %}

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

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

{% set mediaPhotos = {hero: 'images/public/walk-the-line/shooting/AG57.jpg', ag27: 'images/public/walk-the-line/shooting/AG27.jpg', ag62: 'images/public/walk-the-line/shooting/AG62.jpg', ag57: 'images/public/walk-the-line/shooting/AG57.jpg', ar54: 'images/public/walk-the-line/shooting/AR54.jpg', div21: 'images/public/walk-the-line/shooting/DIV21.jpg', div25: 'images/public/walk-the-line/shooting/DIV25.jpg', div3: 'images/public/walk-the-line/shooting/DIV3.jpg', div29: 'images/public/walk-the-line/shooting/DIV29.jpg'} %}

<main class="media-page" id="top">
    <section class="media-hero">
        <div class="media-hero-no" aria-hidden="true">01 / 06</div>
        <div class="media-hero-ghost" aria-hidden="true">LISTEN</div>

        <div class="media-hero-copy" data-reveal>
            <p class="wtl-eyebrow">Walk The Line · Images & sessions</p>
            <h1><span>SEE.</span><strong>HEAR.</strong><em>FEEL.</em></h1>
            <p class="media-hero-lead">Les images montrent la scène.<br><em>La musique raconte le reste.</em></p>
        </div>

        {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.hero, alt: 'Portrait de Walk The Line dans une lumière contrastée', mode: 'graphic', class: 'media-hero-image', position: '48% 32%', loading: 'eager', reveal: true} only %}

        <div class="media-hero-note" data-reveal>
            <span></span>
            <p>Voix · guitare · récit</p>
        </div>

        <a class="wtl-scroll-cue" href="#featured"><span>Voir / écouter</span><i aria-hidden="true"></i></a>
    </section>

    <section class="media-editorial-intro">
        <div class="media-section-no" aria-hidden="true">02</div>
        <div class="media-editorial-copy" data-reveal><p class="wtl-kicker">Images & territoire</p><h2>Des fragments<br><em>du même voyage.</em></h2><p>Walk The Line se construit autant dans les chansons que dans les traces qui les entourent : paysages, objets, lumière, matière, gestes et silences.</p><p>Ces images ne cherchent pas à fabriquer une Amérique de carte postale. Elles prolongent le même voyage que le spectacle : celui d’un homme, d’un territoire et de ce qui subsiste lorsque le décor change.</p></div>
    </section>

    <section class="media-featured" id="featured">
        <div class="media-section-no" aria-hidden="true">03</div>
        <div class="media-featured-word" aria-hidden="true">LIVE</div>

        <header class="media-featured-head" data-reveal>
            <p class="wtl-kicker">Live session</p>
            <h2>Une chanson.<br><em>Pas de filtre.</em></h2>
            <p>Folsom Prison Blues n’a pas besoin de décor. Le rythme avance, la voix raconte, et la prison finit par apparaître toute seule.</p>
        </header>

        <div class="media-featured-screen" data-reveal>
            <div class="media-featured-visual media-featured-visual--video">
                <video class="media-featured-video" controls playsinline preload="metadata" poster="{{ asset('video/walk-the-line/folsom-prison-blues-demo-poster.jpg') }}">
                    <source src="{{ asset('video/walk-the-line/folsom-prison-blues-demo.mp4') }}" type="video/mp4">
                    Votre navigateur ne permet pas de lire cette vidéo.
                </video>
                <div class="media-featured-caption">
                    <small>LIVE SESSION</small>
                    <strong>Folsom Prison Blues</strong>
                </div>
            </div>
            <div class="media-featured-meta">
                <span>01</span>
                <p>Voix, guitare, pulsation. Le morceau avance droit devant, sans chercher à adoucir ce qu’il raconte.</p>
                <small>1:32 · LIVE SESSION</small>
            </div>
        </div>
    </section>

    <section class="media-gallery" id="photos">
        <div class="media-section-no" aria-hidden="true">04</div>
        <header class="media-gallery-head" data-reveal>
            <p class="wtl-kicker">Fragments</p>
            <h2>Pas une galerie.<br><span>Des traces.</span></h2>
        </header>

        <div class="media-collage media-collage-real">
            {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.ag27, alt: 'Portrait photographique Walk The Line', mode: 'detail', class: 'media-real-shot media-real-ag27', reveal: true} only %}
            {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.ag62, alt: 'Walk The Line traversé par une lumière forte, image de transmission', mode: 'detail', class: 'media-real-shot media-real-ag62', reveal: true} only %}
            {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.ar54, alt: 'Walk The Line dans un paysage ouvert', mode: 'detail', class: 'media-real-shot media-real-ar54', reveal: true} only %}
            {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.ag57, alt: 'Portrait de Walk The Line dans une lumière sombre et contrastée', mode: 'detail', class: 'media-real-shot media-real-ag57', reveal: true} only %}
            {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.div21, alt: 'Détail photographique du shooting Walk The Line', mode: 'detail', class: 'media-real-shot media-real-div21', reveal: true} only %}
            {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.div25, alt: 'Objet et matière du shooting Walk The Line', mode: 'detail', class: 'media-real-shot media-real-div25', reveal: true} only %}
            {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.div3, alt: 'Détail de l’univers visuel Walk The Line', mode: 'detail', class: 'media-real-shot media-real-div3', reveal: true} only %}
            {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: mediaPhotos.div29, alt: 'Fauteuil usé photographié pour Walk The Line', mode: 'detail', class: 'media-real-shot media-real-div29', reveal: true} only %}
            <div class="media-collage-copy" data-reveal><p>Une guitare posée, un fauteuil usé, une lumière, une route ou un morceau de paysage peuvent parfois raconter autant qu’un portrait.</p><span>DES IMAGES. DES VOIX. UN HÉRITAGE.</span></div>
        </div>
        <p class="media-photo-credit" data-reveal>Crédit photos : Jullian Chevalier Photographisme</p>
    </section>

    <section class="media-sessions" id="sessions">
        <div class="media-section-no" aria-hidden="true">05</div>
        <div class="media-sessions-ghost" aria-hidden="true">REC</div>
        <header class="media-sessions-head" data-reveal>
            <p class="wtl-kicker">Sessions</p>
            <h2>Quatre morceaux.<br><em>Quatre portes d’entrée.</em></h2>
            <p>Quelques morceaux, quelques traces… Le reste appartient à l’écoute.</p>
        </header>

        <div class="media-session-list" data-audio-list>
            {% set sessions = [
                { no: '01', kind: 'LIVE / EXTRAIT', title: 'Folsom Prison Blues', text: 'L’énergie immédiate et le son des débuts.', file: 'audio/walk-the-line/folsom-prison-blues-demo-v2.mp3', duration: '1:31' },
                { no: '02', kind: 'LIVE / SESSION', title: 'I Still Miss Someone', text: 'La retenue, le manque et l’espace laissé aux silences.', file: 'audio/walk-the-line/i-still-miss-someone-v2.mp3', duration: '3:16' },
                { no: '03', kind: 'LIVE / SESSION', title: 'Love’s Been Good to Me', text: 'Une chanson qui regarde le chemin parcouru.', file: 'audio/walk-the-line/loves-been-good-to-me-v5.mp3', duration: '3:10' },
                { no: '04', kind: 'LIVE / SESSION', title: 'On the Evening Train', text: 'Une histoire simple, portée par la voix et la guitare.', file: 'audio/walk-the-line/on-the-evening-train-v2.mp3', duration: '4:18' }
            ] %}

            {% for session in sessions %}
                <article class="media-session" data-reveal data-audio-player>
                    <span class="media-session-no">{{ session.no }}</span>
                    <div class="media-session-copy">
                        <small>{{ session.kind }}</small>
                        <h3>{{ session.title }}</h3>
                        <p>{{ session.text }}</p>
                        <div class="media-audio">
                            <button type="button" class="media-audio-toggle" data-audio-toggle aria-label="Lire {{ session.title }}">
                                <span class="media-audio-icon" aria-hidden="true">▶</span>
                            </button>
                            <div class="media-audio-track">
                                <input class="media-audio-range" data-audio-range type="range" min="0" max="1000" value="0" step="1" aria-label="Position de lecture de {{ session.title }}">
                                <div class="media-audio-time"><span data-audio-current>0:00</span><span data-audio-duration>{{ session.duration }}</span></div>
                            </div>
                            <audio preload="metadata" data-audio src="{{ asset(session.file) }}"></audio>
                        </div>
                    </div>
                    <span class="media-session-state is-live">ÉCOUTER</span>
                </article>
            {% endfor %}
        </div>
    </section>

    <section class="wtl-booking media-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>Besoin d’un aperçu du projet, d’images de diffusion ou d’éléments pour programmer le concert ? Les ressources professionnelles seront réunies ici, sans perdre le fil de l’univers Walk The Line.</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="{{ path('site_wtl_show') }}">Le spectacle</a>
                <a href="{{ path('site_wtl_dates') }}">Dates</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>A MAN. A VOICE. A GUITAR. A STORY.</span>
            <span>© {{ 'now'|date('Y') }}</span>
            {% include 'public/walk_the_line/partials/_legal_links.html.twig' %}
</footer>
    </section>
</main>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/public/walk-the-line/media.js') }}" defer></script>
{% endblock %}