{% extends '@SyliusShop/layout.html.twig' %}

{% form_theme form '@SyliusShop/Form/theme.html.twig' %}

{% block title %}{{ 'sylius.ui.contact_us'|trans }} | {{ parent() }}{% endblock %}

{% import '@SyliusShop/Common/Macro/headers.html.twig' as headers %}

{% block content %}
    <section class="container pt-0 pt-sm-1 pt-md-2 pt-lg-3 pt-xl-4 mt-3 mb-5">
        <div class="row row-cols-1 row-cols-md-2 g-0 overflow-hidden rounded-5 mt-5">

            <div class="col bg-body-tertiary order-md-1 py-5 px-4 px-xl-5">
                <div class="py-md-4 py-lg-5 px-md-4 px-lg-5">
                    <h1 class="pb-2 pb-sm-3 pb-lg-0 mb-md-4 mb-lg-5">Nous écrire</h1>
                    <p class="mb-4 text-muted">
                        Une question sur nos plantes, un besoin d'accompagnement pour votre projet paysager ou
                        simplement l'envie d'entrer en contact ? Notre équipe vous répond sous 48h.
                    </p>
                    <ul class="list-unstyled pb-sm-2 mb-0">
                        <li class="d-flex">
                            <i class="ci-map-pin fs-lg mt-1"></i>
                            <span class="ps-2 ms-1">Disponibles partout en France.</span>
                        </li>
                        <li class="nav animate-underline mt-3">
                            <i class="ci-phone fs-lg mt-1 pe-2 me-1"></i>
                            <a class="nav-link animate-target fs-base fw-normal p-0"
                               href="tel:+33652310666">06 52 31 06 66</a>
                        </li>
                    </ul>

                    <hr class="my-4">

                    {{ sylius_template_event('sylius.shop.contact.request.after_content_header') }}

                    <div class="mt-4">
                        {{ form_start(form, {
                            'action': path('sylius_shop_contact_request'),
                            'attr': {'class': 'loadable contact-request-form', 'novalidate': 'novalidate'}
                        }) }}
                        {{ form_row(form.email) }}
                        <div class="mb-3">
                            {{ form_label(form.message) }}
                            {{ form_widget(form.message, {
                                'attr': {
                                    'class': 'form-control contact-message-field fs-5',
                                    'style': 'font-size:1.2rem; line-height:1.7; min-height: 200px;'
                                }
                            }) }}
                            {{ form_errors(form.message) }}
                        </div>

                        {{ sylius_template_event('sylius.shop.contact.request.form', {'form': form}) }}

                        {{ form_row(form._token) }}
                        <button type="submit" class="btn btn-primary w-100" {{ sylius_test_html_attribute('send-button') }}>
                            {{ 'sylius.ui.send'|trans }}
                        </button>
                        {{ form_end(form, {'render_rest': false}) }}
                    </div>

                    <p class="text-muted mt-4 mb-0">Réponse garantie sous 48h. À très vite !</p>
                </div>
            </div>

            <div class="col position-relative order-md-2">
                <div class="ratio ratio-4x3"></div>
                <img src="{{ asset('assets/images/page-locale/bas-deux.JPG') }}"
                     class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover d-md-none"
                     alt="Collection de plantes prêtes à être installées">

                <img src="{{ asset('assets/images/page-locale/bas-deux.JPG') }}"
                     class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover d-none d-md-block"
                     alt="Collection de plantes prêtes à être installées">
            </div>
        </div>
    </section>
{% endblock %}