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

{% block title %}Contact — Walk The Line{% endblock %}
{% block description %}Contacter Walk The Line pour une programmation, une demande presse, une question technique ou toute autre demande.{% endblock %}

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

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

{% set contactPhoto = 'images/public/walk-the-line/shooting/AR42.jpg' %}

{% set generalEmail = project.contactEmail ?: (association ? association.email : null) %}
{% set bookingEmail = project.bookingEmail ?: generalEmail %}
{% set phone = association ? association.phone : null %}

<main class="contact-page" id="top">
    <section class="contact-hero">
        <div class="contact-hero-index" aria-hidden="true">01 / 04</div>
        <div class="contact-hero-ghost" aria-hidden="true">HELLO</div>

        <div class="contact-hero-copy" data-reveal>
            <p class="wtl-eyebrow">Un lieu · une idée · une question</p>
            <h1><span>LET'S</span><strong>TALK.</strong></h1>
            <p class="contact-hero-lead">Une conversation suffit souvent<br><em>pour voir si la scène est la bonne.</em></p>
        </div>

        {% include 'public/walk_the_line/partials/_photo.html.twig' with {src: contactPhoto, alt: 'Portrait direct de Walk The Line regardant l’objectif', mode: 'graphic', class: 'contact-hero-image', position: '50% 42%', loading: 'eager', reveal: true} only %}

        <div class="contact-hero-note" data-reveal>
            <span></span>
            <p>Programmation · Presse · Technique</p>
        </div>

        <a class="wtl-scroll-cue" href="#write"><span>Écrire</span><i aria-hidden="true"></i></a>
    </section>

    <section class="contact-intro">
        <div class="contact-section-no" aria-hidden="true">02</div>
        <div class="contact-intro-word" aria-hidden="true">WRITE</div>

        <header class="contact-intro-head" data-reveal>
            <p class="wtl-kicker">Aller à l'essentiel</p>
            <h2>Vous avez un lieu.<br><em>Parlons du reste.</em></h2>
            <p>Programmation, presse, accueil technique ou simple question : choisissez le sujet, laissez quelques repères et le message sera préparé pour le bon contact.</p>
        </header>

        <div class="contact-direct" data-reveal>
            <div>
                <small>Programmation</small>
                {% if bookingEmail %}<a href="mailto:{{ bookingEmail }}">{{ bookingEmail }} <span>↗</span></a>{% else %}<strong>À renseigner</strong>{% endif %}
            </div>
            <div>
                <small>Contact général</small>
                {% if generalEmail %}<a href="mailto:{{ generalEmail }}">{{ generalEmail }} <span>↗</span></a>{% else %}<strong>À renseigner</strong>{% endif %}
            </div>
            {% if phone %}
                <div>
                    <small>Téléphone</small>
                    <a href="tel:{{ phone|replace({' ':''}) }}">{{ phone }} <span>↗</span></a>
                </div>
            {% endif %}
        </div>
    </section>

    <section class="contact-write" id="write" data-recaptcha-site-key="{{ project.recaptchaEnabled ? project.recaptchaSiteKey : '' }}">
        <div class="contact-section-no" aria-hidden="true">03</div>
        <div class="contact-write-ghost" aria-hidden="true">MESSAGE</div>

        <div class="contact-write-title" data-reveal>
            <p class="wtl-kicker">Votre message</p>
            <h2>Quelques lignes.<br><span>Pas un formulaire administratif.</span></h2>
        </div>

        <form class="contact-form" data-contact-form data-reveal method="post" action="{{ path('site_wtl_contact') }}">
            <input type="hidden" name="_token" value="{{ csrf_token('public-contact-'~project.id) }}">
            <input type="hidden" name="recaptcha_token" data-recaptcha-token value="">
            <input type="hidden" name="started_at" value="{{ 'now'|date('U') }}">
            <div class="contact-honeypot" aria-hidden="true"><label>Site web<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
            {% if contactSent %}<div class="contact-form-alert is-success contact-field-wide">Merci. Votre message a bien été reçu.</div>{% endif %}
            {% if contactErrors is not empty %}<div class="contact-form-alert is-error contact-field-wide"><strong>Le message n’a pas été envoyé.</strong><ul>{% for error in contactErrors %}<li>{{ error }}</li>{% endfor %}</ul></div>{% endif %}
            <div class="contact-field contact-field-wide">
                <label for="contact-subject">Je vous contacte pour</label>
                <select id="contact-subject" name="subject">
                    <option value="booking"{% if contactValues.subject == 'booking' %} selected{% endif %}>Programmer le spectacle</option>
                    <option value="press"{% if contactValues.subject == 'press' %} selected{% endif %}>Presse / média</option>
                    <option value="resource"{% if contactValues.subject == 'resource' %} selected{% endif %}>Demander une ressource</option>
                    <option value="technical"{% if contactValues.subject == 'technical' %} selected{% endif %}>Question technique</option>
                    <option value="other"{% if contactValues.subject == 'other' %} selected{% endif %}>Autre</option>
                </select>
            </div>

            <div class="contact-field">
                <label for="contact-name">Nom</label>
                <input id="contact-name" name="name" type="text" autocomplete="name" placeholder="Votre nom" value="{{ contactValues.name }}" required>
            </div>
            <div class="contact-field">
                <label for="contact-structure">Structure / lieu</label>
                <input id="contact-structure" name="structure" type="text" autocomplete="organization" placeholder="Salle, festival, média…" value="{{ contactValues.structure }}">
            </div>
            <div class="contact-field">
                <label for="contact-email">Votre e-mail</label>
                <input id="contact-email" name="email" type="email" autocomplete="email" placeholder="vous@exemple.fr" value="{{ contactValues.email }}" required>
            </div>
            <div class="contact-field">
                <label for="contact-phone">Téléphone</label>
                <input id="contact-phone" name="phone" type="tel" autocomplete="tel" placeholder="Optionnel" value="{{ contactValues.phone }}">
            </div>
            <div class="contact-field contact-field-wide">
                <label for="contact-message">Message</label>
                <textarea id="contact-message" name="message" rows="7" placeholder="Le lieu, la date envisagée, la jauge, le contexte… ou simplement votre question." required>{{ contactValues.message }}</textarea>
            </div>

            <div class="contact-consent contact-field-wide">
                <label><input type="checkbox" name="consent" value="1" required><span>J’ai pris connaissance de la <a href="{{ path('site_wtl_privacy') }}" target="_blank">politique de confidentialité</a> et de l’utilisation de mes coordonnées pour traiter cette demande.</span></label>
            </div>
            <div class="contact-form-bottom contact-field-wide">
                <p>Votre message est transmis à l’équipe Walk The Line et enregistré dans le back-office pour permettre son traitement et son suivi.</p>
                <button type="submit">Envoyer le message <span>↗</span></button>
            </div>
        </form>
    </section>

    <section class="contact-end">
        <div class="contact-end-ghost" aria-hidden="true">WTL</div>
        <div class="contact-end-copy" data-reveal>
            <p class="wtl-kicker">Walk The Line</p>
            <h2>Une voix.<br>Une guitare.<br><em>Une histoire.</em></h2>
            <p>Pour découvrir le projet avant d'écrire : le spectacle, les dates et les médias sont à quelques pas.</p>
        </div>
        <nav class="contact-end-links" data-reveal>
            <a href="{{ path('site_wtl_show') }}"><span>01</span>Le spectacle <b>↗</b></a>
            <a href="{{ path('site_wtl_dates') }}"><span>02</span>Les dates <b>↗</b></a>
            <a href="{{ path('site_wtl_media') }}"><span>03</span>Les médias <b>↗</b></a>
            <a href="{{ path('site_wtl_booking') }}"><span>04</span>Programmation / Presse <b>↗</b></a>
        </nav>
        <footer class="contact-footer">
            <span>WALK THE LINE</span>
            <span>HELLO, I'M NOT JOHNNY CASH.</span>
            <span>© {{ 'now'|date('Y') }}</span>
            {% include 'public/walk_the_line/partials/_legal_links.html.twig' %}
</footer>
    </section>
</main>
{% endblock %}

{% block javascripts %}
    {% if project.recaptchaEnabled and project.recaptchaSiteKey %}<script src="https://www.google.com/recaptcha/api.js?render={{ project.recaptchaSiteKey }}" async defer></script>{% endif %}
    <script src="{{ asset('js/public/walk-the-line/contact.js') }}" defer></script>
{% endblock %}