{% extends 'front/layout.html.twig' %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/mairie.css') }}" />{% endblock %}

{% block title %}Je suis une Mairie{% endblock %}

{% block body %}

    <div class="container-m">
        <h1 class="title-body">> Mairies, Municipalités, Collectivités</h1>

        <section class="section mayor border-bottom">
            <img src="{{ asset('build/images/mayor.svg') }}" alt="Village" class="section-img">
            <div class="section-body">
                <h4 class="section-title user-select-none">Offrez à vos adminsitrés un nouveau service essentiel de
                    proximité.</h4>
                <p class="section-text user-select-none">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Officia error sed voluptate nulla natus voluptatibus?
                    Nesciunt odio velit dolor corrupti vel explicabo earum fugit labore consectetur tempora ipsa
                    expedita officia quasi veritatis recusandae numquam magnam corporis ratione,
                    adipisci quibusdam facere dolores. Culpa ducimus maiores quisquam, corrupti quia cumque maxime sint!
                </p>
            </div>

        </section>

        <section class="installation" style="height: auto">
            <h2 class="section-title facile" style="padding-left: 10px;">> Facile à Installer </h2>
            <div class="section-body">
                <div class="installation-carousel">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"
                         style="width: 309px;">
                        <ol class="carousel-indicators">
                            <li id="black" data-target="#carouselExampleIndicators" data-slide-to="0"
                                class="active"></li>
                            <li id="black" data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li id="black" data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                            <li id="black" data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                            <li id="black" data-target="#carouselExampleIndicators" data-slide-to="4"></li>

                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active" data-interval="3000">
                                <img src="{{ asset('build/images/carouselDistrib/distrib4.jpg') }}"
                                     class="d-block w-100" alt="...">
                            </div>
                            <div class="carousel-item" data-interval="3000">
                                <img src="{{ asset('build/images/carouselDistrib/distrib2.jpg') }}"
                                     class="d-block w-100" alt="...">
                            </div>
                            <div class="carousel-item" data-interval="3000">
                                <img src="{{ asset('build/images/carouselDistrib/distrib3.jpg') }}"
                                     class="d-block w-100" alt="...">

                            </div>
                            <div class="carousel-item" data-interval="3000">
                                <img src="{{ asset('build/images/carouselDistrib/distrib5.jpg') }}"
                                     class="d-block w-100" alt="...">

                            </div>
                            <div class="carousel-item" data-interval="3000">
                                <img src="{{ asset('build/images/carouselDistrib/distrib1.jpg') }}"
                                     class="d-block w-100" alt="...">

                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                           data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                           data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="installation-infos">
                    <div class="infos-body">
                        <img class="infos-img" src="{{ asset('build/images/Icon220V.svg') }}" alt="...">
                        <p class="infos-text">Prise 220V</p>
                    </div>
                    <div class="infos-body">
                        <img class="infos-img" src="{{ asset('build/images/IconDalle.svg') }}" alt="...">
                        <p class="infos-text">Installation sur une dalle de 140cm x 110 cm</p>
                    </div>
                    <div class="infos-body">
                        <img class="infos-img" src="{{ asset('build/images/euro.png') }}" alt="...">
                        <p class="infos-text">Pas de coûts suplémentaires</p>
                    </div>
                </div>
            </div>
        </section>
        <h1 class="title-body">> Ce qu'il faut retenir...</h1>
        <div class="plus">
            <section class="section exigence border-bottom">
                <img src="{{ asset('build/images/Quali-process2.0.jpeg') }}" alt="Village" class="section-img-exigence">
                <div class="section-body">
                    <h4 class="section-title user-select-none">Exigence de qualité</h4>
                    <p class="section-text user-select-none">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                        Officia error sed voluptate nulla natus voluptatibus? </p>
                </div>
            </section>
            <section class="section exigence border-bottom">
                <img src="{{ asset('build/images/Quali-artisans.jpeg') }}" alt="Village" class="section-img-exigence">
                <div class="section-body">
                    <h4 class="section-title user-select-none">Artisan de qualité</h4>
                    <p class="section-text user-select-none">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                        Officia error sed voluptate nulla natus voluptatibus? </p>
                </div>
            </section>
            <section class="section exigence border-bottom">
                <img src="{{ asset('build/images/Capture d’écran 2020-12-29 à 14.49.33.png') }}" alt="Village"
                     class="section-img-exigence">
                <div class="section-body">
                    <h4 class="section-title user-select-none">Savoir faire français</h4>
                    <p class="section-text user-select-none">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                        Officia error sed voluptate nulla natus voluptatibus? </p>
                </div>
            </section>
        </div>

        <section class="section utiles border-bottom">
            <img src="{{ asset('build/images/utile3.0.jpg') }}" alt="" class="section-img">
            <div class="section-body">
                <h4 class="section-title user-select-none">Un service qui associe utilité et facilité</h4>
                <p class="section-text user-select-none">
                    <section class="utiles">
                        <article>
                            <div class="infos-body-utiles">
                                <img src="{{ asset('build/images/IconCO2.svg') }}" alt="" class="infos-img-utiles">
                <p class="infos-text">À proximité, plus besoin de voiture <br></p>
            </div>

            <div class="infos-body-utiles">
                <img src="{{ asset('build/images/Icon24.svg') }}" alt="" class="infos-img-utiles">
                <p class="infos-text">Service 24h/24 <br></p>
            </div>
            </article>
            <article>
                <div class="infos-body-utiles">
                    <img src="{{ asset('build/images/IconBoulanger.svg') }}" alt="" class="infos-img-utiles">
                    <p class="infos-text">Soutient l'artisanat<br></p>
                </div>
                <span class="stamp">service clés en main !</span>
            </article>

        </section>
        </section>


        <section class="section-form-mairie">
            <h2 class="form-title">Un premier échange avec nous ? C'est par ici :</h2>
            <div class="form-mairie">
                <div class="form-text">
                    <p class="section-text">Vos administrés vous réclament nan mise en place d’un service boulangerie ? Vous
                        avez une idée ou un projet en cours ? Discutez en avec notre équipe ! </p>
                </div>

                <div class="form-form">
                    {{ form_start(formMairie) }}

                    <div> {{ form_row(formMairie.Type) }}</div>
                    <div class="form-ville">
                        <h4>Votre ville</h4>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.namePlace,{'label':'Commune','attr':{'placeholder':"Nom de la commune"},}) }}</div>
                            <div class="col">{{ form_row(formMairie.codePostal,{'label':'Code Postal','attr':{'placeholder':"Code Postal de la commune"},}) }}</div>
                            <div class="col">{{ form_row(formMairie.numberPeople,{'label':'Habitants','attr':{'placeholder':"Nombre d'habitants dans la commune"}}) }}</div>
                        </div>

                    </div>
                    <div class="form-vous">
                        <h4>Vous</h4>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.nameContact,{'label':'Nom','attr':{'placeholder':"Votre nom"}}) }}</div>
                            <div class="col">{{ form_row(formMairie.nameCapacity,{'label':'Fonction','attr':{'placeholder':"Votre Fonction"}}) }}</div>
                        </div>
                    </div>
                    <div class="form-coord">
                        <h4>Vos coordonnées</h4>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.email,{'label':'E-mail','attr':{'placeholder':"Votre mail"}}) }}</div>
                            <div class="col">{{ form_row(formMairie.phone,{'label':'Numéro de téléphone','attr':{'placeholder':"Votre numéro de téléphone"}}) }}</div>
                        </div>

                    </div>
                    <div class="form-mess">
                        <h4>Votre message</h4>
                        {{ form_row(formMairie.message,{'attr':{'placeholder':"Votre projet ? "}}) }}
                        {{ form_row(formMairie._token) }}
                    </div>
                    <div >
                        <p>Que souhaitez-vous faire ?</p>
                        {{ form_row(formMairie.isMeet,{'label':"Être recontacter par téléphone"}) }}
                        {{ form_row(formMairie.isMail,{'label':"Recevoir documentation par mail"}) }}
                        <div class="form-souhait">
                        {{ form_row(formMairie.submitForm,{'label':"Envoyer la demande",'attr':{'class':'btn-form'}}) }}
                        </div>
                        {{ form_end(formMairie, {'render_rest': false}) }}
                    </div>
                    <p>
                        Chez Quali Distrib nous accordons une attention toute particulière sur la sécurité de vos
                        données.
                        Elles ne sont récoltées que dans un but informatif afin d’aiguiller nos partenaires artisans.<br>
                        Dans aucun cas vos données ne seront revendues ou échangées.
                    </p>
                </div>
            </div>
        </section>
    </div>
{% endblock %}