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

{% block title %}Contact{% endblock %}

{% block body %}

    <!--Page Title-->
    <section class="page-title" style="background-image:url({{ asset('images/background/10.jpg') }});">
        <div class="auto-container">
            <div class="inner-container clearfix">
                <div class="title-box">
                    <h1>Nous Contacter</h1>
                    <span class="title">Réalisons votre projet ensemble ...</span>
                </div>
                <ul class="bread-crumb clearfix">
                    <li><a href="{{ path('page.home') }}">Accueil</a></li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- Contact Page Section -->
    <section class="contact-page-section">
        <div class="auto-container">
            <div class="row">
                <!-- Form Column -->
                <div class="form-column col-lg-7 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="sec-title">
                            <span class="float-text">INFORMATIONS</span>
                            <h2>Nous Contacter</h2>
                        </div>

                        {% for label, messages in app.flashes %}
                            {% for message in messages %}
                                <div class="alert alert-{{ label }}" role="alert">
                                    {{ message }}
                                </div>
                            {% endfor %}
                        {% endfor %}

                        <div class="contact-form">

                            {% form_theme form_contact 'form_div_layout.html.twig' %}
                            {{ form_start(form_contact) }}



                                <div class="row">
                                    <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                        {% if form_errors(form_contact.username) is not empty %}
                                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                                <small>{{ form_errors(form_contact.username) }}</small>
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                        {% endif %}
                                        {{ form_widget(form_contact.username, {label: false, attr: {placeholder: 'Nom*'} }) }}
                                    </div>

                                    <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                        {% if form_errors(form_contact.phone) is not empty %}
                                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                                <small>{{ form_errors(form_contact.phone) }}</small>
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                        {% endif %}
                                        {{ form_widget(form_contact.phone, {label: false, attr: {placeholder: 'Téléphone*'} }) }}
                                    </div>

                                    <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                        {% if form_errors(form_contact.company) is not empty %}
                                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                                <small>{{ form_errors(form_contact.company) }}</small>
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                        {% endif %}
                                        {{ form_widget(form_contact.company, {label: false, attr: {placeholder: 'Entreprise ?'} }) }}
                                    </div>

                                    <div class="form-group col-lg-6 col-md-12 col-sm-12">
                                        {% if form_errors(form_contact.email) is not empty %}
                                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                                <small>{{ form_errors(form_contact.email) }}</small>
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                        {% endif %}
                                        {{ form_widget(form_contact.email, {label: false, attr: {placeholder: 'Email*'} }) }}
                                    </div>

                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        {% if form_errors(form_contact.message) is not empty %}
                                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                                <small>{{ form_errors(form_contact.message) }}</small>
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                        {% endif %}
                                        {{ form_widget(form_contact.message, {label: false, attr: {placeholder: 'Message'} }) }}
                                    </div>

                                    <div class="form-group col-lg-12 col-md-12 col-sm-12">
                                        <button class="theme-btn btn-style-three" type="submit" name="submit-form">Envoyer</button>
                                    </div>
                                </div>

                            {{ form_end(form_contact) }}


                        </div>

                        <div class="contact-info">
                            <div class="row">
                                <div class="info-block col-lg-4 col-md-4 col-sm-12">
                                    <div class="inner">
                                        <h4>Adresse</h4>
                                        <p>4 Bis rue des Pommereues, 08140 Bazeilles</p>
                                    </div>
                                </div>

                                <div class="info-block col-lg-4 col-md-4 col-sm-12">
                                    <div class="inner">
                                        <h4>Téléphone</h4>
                                        <p>+33 6 84 72 10 34</p>
                                    </div>

                                </div>

                                <div class="info-block col-lg-4 col-md-4 col-sm-12">
                                    <div class="inner">
                                        <h4>Email</h4>
                                        <p><a href="#">contact@4cr-mo.fr</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="map-column col-lg-5 col-md-12 col-sm-12">
                    <div class="inner-column">
                         <div class="map-outer">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11709.394802726616!2d4.995614993742872!3d49.67756428670731!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1706125946198!5m2!1sfr!2sfr" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Contact Page Section -->

    <!--End Clients Section-->

{% endblock %}