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

{% block title %}Contactez-nous{% endblock %}

{% block body %}

    <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall "
             data-options='{direction: "fromtop", animation_duration: 25, direction: "reverse"}'>
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-black-opacity-0_3--after"
             style="height: 140%; background-image: url({{ asset('templates/bo/img/bg6.jpg') }});"></div>
        <!-- End Parallax Image -->

        <!-- Promo Block Content -->
        <div class="container g-color-white text-center g-py-100">
            <h3 class="h1 g-font-weight-600 text-uppercase mb-2">Nous contacter</h3>
        </div>
        <!-- Promo Block Content -->
    </section>


    <section class="container g-pt-100 g-pb-40">
        <div class="row justify-content-between">
            <div class="col-lg-7 g-mb-60">
                {% if success %}
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="h5"><strong>Mail envoyé!</strong></h4>
                        Nous vous contacterons dés le traitement de votre demande.
                    </div>
                {% endif %}
                <h2 class="h3">Contactez-nous</h2>
                <p class="g-color-gray-dark-v3 g-font-size-16">Vous avez un projet, une idée ou tout simplement besoin
                    d'informations, envoyez-nous un message.</p>

                <hr class="g-my-40">

                <!-- Contact Form -->
                {{ form_start(form) }}
                <div class="g-mb-20">
                    {{ form_label(form.subject, null, {'label_attr':{'class':'g-color-gray-dark-v2 g-font-weight-600 g-font-size-13'}}) }}
                    <span class="g-color-red">*</span>
                    {{ form_widget(form.subject, {'attr':{'class':'form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-primary--focus g-brd-gray-light-v4 rounded-3 g-py-13 g-px-15', 'size':''}}) }}
                </div>

                <div class="g-mb-20">
                    {{ form_label(form.name, null, {'label_attr':{'class':'g-color-gray-dark-v2 g-font-weight-600 g-font-size-13'}}) }}
                    <span class="g-color-red">*</span>
                    {{ form_widget(form.name, {'attr':{'class':'form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-primary--focus g-brd-gray-light-v4 rounded-3 g-py-13 g-px-15'}}) }}
                </div>

                <div class="g-mb-20">
                    {{ form_label(form.email, null, {'label_attr':{'class':'g-color-gray-dark-v2 g-font-weight-600 g-font-size-13'}}) }}
                    <span class="g-color-red">*</span>
                    {{ form_widget(form.email, {'attr':{'class':'form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-primary--focus g-brd-gray-light-v4 rounded-3 g-py-13 g-px-15'}}) }}
                </div>

                <div class="g-mb-40">
                    {{ form_label(form.message, null, {'label_attr':{'class':'g-color-gray-dark-v2 g-font-weight-600 g-font-size-13'}}) }}
                    <span class="g-color-red">*</span>
                    {{ form_widget(form.message, {'attr':{'class':'form-control g-color-gray-dark-v5 g-bg-white g-bg-white--focus g-brd-primary--focus g-brd-gray-light-v4 g-resize-none rounded-3 g-py-13 g-px-15', 'rows':'7'}}) }}
                </div>

                <button class="btn btn-lg btn-block u-btn-primary g-font-weight-600 g-font-size-default rounded-3 text-uppercase g-py-15 g-px-30"
                        type="submit" role="button">Envoyer
                </button>
                {{ form_end(form) }}
                <!-- End Contact Form -->
            </div>

            <div class="col-lg-4 g-mb-60">
                <!-- Contact Info -->
                <h2 class="h3 mb-4">Informations</h2>
                <div class="media mb-2">
                    <i class="d-flex g-color-gray-dark-v5 mt-1 mr-3 icon-hotel-restaurant-235 u-line-icon-pro"></i>
                    <div class="media-body">
                        <p class="g-color-gray-dark-v3 mb-2">
                            <strong class="text-main">izibrick - ARA Solutions</strong><br>
                            55 Rue Louis Lagorgette<br>
                            33150 Cenon, France<br>
                        </p>
                    </div>
                </div>
                <div class="media mb-2">
                    <i class="d-flex g-color-gray-dark-v5 mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i>
                    <div class="media-body">
                        <p class="g-color-gray-dark-v3 mb-2">Email: <a class="g-color-gray-dark-v4" href="#!">contact@ara-solutions.com</a>
                        </p>
                    </div>
                </div>
                <!--
                <div class="media mb-2">
                    <i class="d-flex g-color-gray-dark-v5 mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i>
                    <div class="media-body">
                        <p class="g-color-gray-dark-v3">Call: <span class="g-color-gray-dark-v4">+32 333 444 555</span>
                        </p>
                    </div>
                </div>-->
            </div>
        </div>
    </section>


{% endblock %}