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

{% block title %}{% if editMode|default(false) %}Édition : {% endif %}{{ metaTitle ?? title }}{% endblock %}

{% block meta %}
    <meta name="description" content="{{ metaDescription ?? title }}">
    <meta property="og:title" content="{{ metaTitle ?? title }}">
    <meta property="og:description" content="{{ metaDescription ?? title }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ app.request.uri }}">
    <link rel="canonical" href="{{ app.request.uri }}">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('contact') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('contact') }}
{% endblock %}

{% block body %}
{% set address = content.address|default('Le rond point des pistes, 20 Rue du Val Claret batiment B, 73320 Tignes') %}
{% set arrow_icon %}{% include 'components/_icon.html.twig' with {name: 'arrow-right', width: '14px', height: '12px'} only %}{% endset %}

<div class="contact-page{% if editMode|default(false) %} contact-page--edit-mode{% endif %}">
    <div class="container contact-page__hero-wrap">
        {% include 'components/_page_hero.html.twig' with {
            title: title,
            edit_mode: editMode|default(false),
            show_tags: false,
            title_class: 'page-hero__title--xl'
        } %}
    </div>

    <div class="container">

        {% for message in app.flashes('success') %}
            <div class="contact-page__alert contact-page__alert--success">{{ message }}</div>
        {% endfor %}

        {% for message in app.flashes('error') %}
            <div class="contact-page__alert contact-page__alert--error">{{ message }}</div>
        {% endfor %}

        <div class="contact-page__columns">
            {# ---------------------------------------------------------- #}
            {# Left column: torn-paper card with the contact form         #}
            {# ---------------------------------------------------------- #}
            <div class="contact-card">
                <h2 class="contact-card__title">{{ 'contact.write_to_us'|trans }}</h2>

                <form method="post" action="{{ path('contact_submit') }}" id="contact-form" class="contact-form" enctype="multipart/form-data" data-sending-label="{{ 'contact.sending'|trans }}">
                    <div class="contact-form__row">
                        <div class="contact-form__group">
                            <label for="name">{{ 'contact.name'|trans }} *</label>
                            <input type="text" id="name" name="name" required>
                        </div>

                        <div class="contact-form__group">
                            <label for="firstName">{{ 'contact.firstname'|trans }} *</label>
                            <input type="text" id="firstName" name="firstName" required>
                        </div>
                    </div>

                    <div class="contact-form__group">
                        <label for="subject">{{ 'contact.subject'|trans }} *</label>
                        <select id="subject" name="subject" class="contact-form__select" required>
                            <option value="project_need">{{ 'contact.subject_options.project_need'|trans }}</option>
                            <option value="application">{{ 'contact.subject_options.application'|trans }}</option>
                            <option value="other">{{ 'contact.subject_options.other'|trans }}</option>
                        </select>
                    </div>

                    <div class="contact-form__group">
                        <span class="contact-form__label">{{ 'contact.needs_label'|trans }}</span>
                        <div class="contact-form__checkboxes">
                            <label class="contact-form__checkbox">
                                <input type="checkbox" name="needs[]" value="interior_architecture">
                                <span>{{ 'contact.needs.interior_architecture'|trans }}</span>
                            </label>
                            <label class="contact-form__checkbox">
                                <input type="checkbox" name="needs[]" value="building_architecture">
                                <span>{{ 'contact.needs.building_architecture'|trans }}</span>
                            </label>
                            <label class="contact-form__checkbox">
                                <input type="checkbox" name="needs[]" value="diagnostic">
                                <span>{{ 'contact.needs.diagnostic'|trans }}</span>
                            </label>
                            <label class="contact-form__checkbox">
                                <input type="checkbox" name="needs[]" value="patrimoine">
                                <span>{{ 'contact.needs.patrimoine'|trans }}</span>
                            </label>
                            <label class="contact-form__checkbox">
                                <input type="checkbox" name="needs[]" value="quote">
                                <span>{{ 'contact.needs.quote'|trans }}</span>
                            </label>
                        </div>
                    </div>

                    <div class="contact-form__group">
                        <label for="email">{{ 'contact.email'|trans }} *</label>
                        <input type="email" id="email" name="email" placeholder="{{ 'contact.email_placeholder'|trans }}" required>
                    </div>

                    <div class="contact-form__group">
                        <label for="phone">{{ 'contact.phone'|trans }} *</label>
                        <div class="contact-form__phone">
                            <select id="phoneCountry" name="phoneCountry" class="contact-form__phone-country" aria-label="{{ 'contact.phone'|trans }}">
                                <option value="FR" selected>FR</option>
                                <option value="BE">BE</option>
                                <option value="CH">CH</option>
                                <option value="GB">GB</option>
                            </select>
                            <input type="tel" id="phone" name="phone" class="contact-form__phone-input" placeholder="{{ 'contact.phone_placeholder'|trans }}" required>
                        </div>
                    </div>

                    <div class="contact-form__group">
                        <label for="message">{{ 'contact.message'|trans }} *</label>
                        <textarea id="message" name="message" placeholder="{{ 'contact.message_placeholder'|trans }}" required maxlength="2000"></textarea>
                    </div>

                    <div class="contact-form__group" id="cv-field-group" hidden>
                        <label for="cv">{{ 'contact.cv'|trans }}</label>
                        <input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
                        <span class="contact-form__hint">{{ 'contact.cv_hint'|trans }}</span>
                    </div>

                    <div class="contact-form__group contact-form__group--consent">
                        <label class="contact-form__checkbox">
                            <input type="checkbox" name="consent" value="1" required>
                            <span>{{ 'contact.consent'|trans }}</span>
                        </label>
                    </div>

                    <div class="contact-form__honeypot" aria-hidden="true">
                        <label for="website">Website</label>
                        <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
                    </div>

                    <button type="submit" id="submit-btn" class="link-btn link-btn--lined link-btn--on-light contact-form__submit">
                        <span class="link-btn__label" data-submit-label="true">{{ 'contact.submit'|trans }}</span>
                        {{ arrow_icon }}
                    </button>
                </form>
            </div>

            {# ---------------------------------------------------------- #}
            {# Right column: address + map + instagram                   #}
            {# ---------------------------------------------------------- #}
            <div class="contact-address">
                <h2 class="contact-address__title">{{ 'contact.address_title'|trans }}</h2>

                {% set address_plain = address|replace({'<br>': ' ', '<br/>': ' ', '<br />': ' '})|striptags|trim %}
                <div class="contact-address__block">
                    <p class="contact-address__text"{% if editMode|default(false) %} data-editable="true" data-editor-type="simple-multiline" data-field="address" data-placeholder="Adresse"{% endif %}>{{ address|raw }}</p>
                    <a class="contact-address__itinerary" href="https://www.google.com/maps/dir/?api=1&destination={{ address_plain|url_encode }}" target="_blank" rel="noopener noreferrer">
                        {{ 'contact.itinerary'|trans }} {{ arrow_icon }}
                    </a>
                </div>

                <a class="contact-address__map" href="https://maps.app.goo.gl/j7E2usLacycN15oz6" target="_blank" rel="noopener noreferrer">
                    <img src="{{ asset('build/images/contact/map.png') }}" alt="{{ 'contact.address_title'|trans }}" loading="lazy">
                </a>

                <div class="contact-address__social">
                    <span class="contact-address__social-label">{{ 'contact.instagram_follow'|trans }}</span>
                    <a href="https://www.instagram.com/galta.archi/" class="link-btn link-btn--lined link-btn--on-light contact-address__instagram-btn" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                        {% include 'components/_icon.html.twig' with {name: 'instagram', size: '18px'} only %}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}