{% trans_default_domain 'mairie' %}
{% set route = app.request.get('_route') %}

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

{% block meta %}
    <meta name="description"
          content="Votre commune ne dispose pas d’une boulangerie ? La solution la plus simple : Y installé un distributeur automatique, alimenté par un boulanger local ! ">
    <meta property="og:title" content="Je suis une Mairie"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://qualidistrib.com/mairie"/>
    <meta property="og:image" content="{{ asset('build/images/derniere-generation.jpeg') }}"/>
    <meta property="og:description"
          content="Votre commune de dispose pas d’une boulangerie ? La solution la plus simple : Y installé un distributeur automatique, alimenté par un boulanger local ! ">
{% endblock %}
{% 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 id="titleOne" class="title-body">{{ 'mairie.titleTitre'|trans }}</h1>
        <h4 id="offrez" class="title user-select-none">{{ 'mairie.titleTexte'|trans }}</h4>
        <section class="section mayor border-bottom">
            <div class="section-body">
                <div id="solution" class="section-body-block1">
                    <p class="section-body-text1"><span>{{ 'mairie.solution'|trans }}</span> <br>
                        {{ 'mairie.solutionLibre'|trans }}
                    </p>
                    <p class="section-body-text2">{{ 'mairie.solutionIdeal'|trans }}
                        <img src="{{ asset('build/images/distributeur.jpg') }}" alt="Distributeur"
                             class="section-body-text-img">
                    </p>
                    <p class="section-body-text">{{ 'mairie.conso'|trans }}</p>
                </div>
                <div id="photoSolution" class="section-body-block2">
                    <img src="{{ asset('build/images/schema-mairie.jpg') }}" alt="Schema Mairie"
                         class="section-body-img">
                </div>

            </div>
            <div id="bulle" class="arrow_box">
                <h3 class="section-body-title">{{ 'mairie.habitants'|trans }}</h3>
            </div>
            <div class="section-body-block3">
                <div id="temoin1" class="card animated lightSpeedIn" style="margin-left: 1vw">
                    <div class="card-body">
                        <div class="card-avatar">
                            <img src="{{ asset('build/images/portrait/bea.jpg') }}" alt="portrait natacha"
                                 class="card-avatar-photo">
                        </div>
                        <div class="card-temoin-header">
                            <div class="card-temoin-subheader">
                                <h5 class="card-title">{{ 'mairie.habitantTitre1'|trans }}</h5>
                                <h6 class="card-subtitle text-muted">{{ 'mairie.habitantSousTitre1'|trans }}</h6>
                            </div>
                        </div>
                        <span class="cot">"</span>
                        <p class="card-text">{{ 'mairie.habitantTexte1'|trans }}</p>
                    </div>
                </div>
                <div id="temoin2" class="card animated lightSpeedIn" style="margin-left: 2vw;margin-right: 2vw">
                    <div class="card-body">
                        <div class="card-avatar">
                            <img src="{{ asset('build/images/portrait/bernard.jpg') }}" alt="portrait bernard"
                                 class="card-avatar-photo" style="margin-top:-30px">
                        </div>
                        <div class="card-temoin-header">
                            <div class="card-temoin-subheader">
                                <h5 class="card-title">{{ 'mairie.habitantTitre2'|trans }}</h5>
                                <h6 class="card-subtitle text-muted">{{ 'mairie.habitantSousTitre2'|trans }}</h6>
                            </div>
                        </div>
                        <span class="cot">"</span>
                        <p class="card-text">{{ 'mairie.habitantTexte2'|trans }}</p>
                    </div>
                </div>
                <div id="temoin3" class="card animated lightSpeedIn" style="margin-right: 1vw">
                    <div class="card-body">
                        <div class="card-avatar">
                            <img src="{{ asset('build/images/portrait/rachel.jpg') }}" alt="portrait rachel"
                                 class="card-avatar-photo" style="margin-top:-15px">
                        </div>
                        <div class="card-temoin-header">
                            <div class="card-temoin-subheader">
                                <h5 class="card-title">{{ 'mairie.habitantTitre3'|trans }}</h5>
                                <h6 class="card-subtitle text-muted">{{ 'mairie.habitantSousTitre3'|trans }}</h6>
                            </div>
                        </div>
                        <span class="cot">"</span>
                        <p class="card-text">{{ 'mairie.habitantTexte3'|trans }}</p>
                    </div>
                </div>

            </div>

        </section>

        <section class="installation" style="height: auto">
            <h1 id="titleTwo" class="section-title " style="padding-left: 10px;">{{ 'mairie.facile'|trans }}</h1>

            <div class="section-body">
                <img id="collage" src="{{ asset('build/images/Nouveau_patch_.png') }}" class="patchwork"
                     alt="collage de plusieurs distributeurs Quali Distrib">

                <div class="installation-infos">
                    <div id="prise" class="infos-body">
                        <img class="infos-img" src="{{ asset('build/images/Icon220V.svg') }}" alt="prise 220V">
                        <p class="infos-text">{{ 'mairie.prise'|trans }}</p>
                    </div>
                    <div id="dalle" class="infos-body">
                        <img class="infos-img" src="{{ asset('build/images/IconDalle.svg') }}" alt="dalle 140cmx110cm">
                        <p class="infos-text">{{ 'mairie.dalle'|trans|raw }}</p>
                    </div>
                </div>
            </div>
        </section>
        <h1 id="retenir" class="title-body">{{ 'mairie.retenir'|trans }}</h1>
        <div class="plus">
            <section id="exigence" class="section exigence border-bottom">
                <img src="{{ asset('build/images/Quali-process2.0.jpeg') }}" alt="exigence"
                     class="section-img-exigence">
                <div class="section-body">
                    <h4 class="section-title user-select-none">{{ 'mairie.exigence'|trans }}</h4>
                    <p class="section-text user-select-none">{{ 'mairie.defis'|trans }}</p>
                </div>
            </section>
            <section id="artisan" class="section exigence border-bottom">
                <img src="{{ asset('build/images/Quali-artisans.jpeg') }}" alt="artisan" class="section-img-exigence">
                <div class="section-body">
                    <h4 class="section-title user-select-none">{{ 'mairie.artisans'|trans }}</h4>
                    <p class="section-text user-select-none">{{ 'mairie.qualite'|trans }}</p>
                </div>
            </section>
            <section id="savoir" class="section exigence border-bottom">
                <img src="{{ asset('build/images/distribligne.jpg') }}" alt="ligne de distributeurs"
                     class="section-img-exigence">
                <div class="section-body drapeau">
                    <h4 class="section-title user-select-none">{{ 'mairie.savoir'|trans }}</h4>
                    <img src="{{ asset('build/images/DrapeauTri.jpg') }}" alt="drapeau tricolore"
                         class="section-img-drapeau">
                    <p class="section-text user-select-none p-plus">{{ 'mairie.recherche'|trans }}</p>
                </div>
            </section>
        </div>

        <section id="associer" class="section utiles section-utile border-bottom">
            <img src="{{ asset('build/images/utile3.0.jpg') }}" alt="association" class="section-img">
            <div class="section-body marleft">
                <h2 class="section-title user-select-none">{{ 'mairie.associer'|trans }}</h2>
                <p class="section-text user-select-none">
                <section class="utiles">
                    <article class="article-utile">
                        <div class="infos-body-utiles" id="eco">
                            <img src="{{ asset('build/images/eco.svg') }}" alt="icone écologique"
                                 class="infos-img-utiles">
                            <p class="infos-text">{{ 'mairie.eco'|trans }}<br></p>
                        </div>

                        <div class="infos-body-utiles" id="joignable">
                            <img src="{{ asset('build/images/Icon24.svg') }}" alt="icone 24/24"
                                 class="infos-img-utiles">
                            <p class="infos-text">{{ 'mairie.joignable'|trans }}<br></p>
                        </div>
                    </article>
                    <article>
                        <div class="infos-body-utiles" id="soutien">
                            <img src="{{ asset('build/images/IconBoulanger.svg') }}" alt="icone boulanger"
                                 class="infos-img-utiles">
                            <p class="infos-text">{{ 'mairie.soutient'|trans }}<br></p>
                        </div>
                        <span id="stamp" class="stamp">{{ 'mairie.service'|trans }}</span>
                    </article>

                </section>
            </div>
        </section>

        <section class="section-form-mairie">
            <h2 class="form-title">{{ 'mairie.echange'|trans }}</h2>
            <div class="form-mairie">
                <div class="form-text">
                    <p class="section-text">{{ 'mairie.mairieFormIntro'|trans|raw }}</p>
                </div>

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

                    <div> {{ form_row(formMairie.Type) }}</div>
                    <div class="form-ville">
                        <h4>{{ 'mairie.commune'|trans }}</h4>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.namePlace,{'attr':{'placeholder':'placeholderPlace'|trans},}) }}</div>
                            <div class="col">{{ form_row(formMairie.codePostal,{'attr':{'placeholder':'placeholderPostal'|trans,'pattern':"/^-?\d+\.?\d*$/", 'onKeyPress':"if(this.value.length==5) return false;"}}) }}</div>
                            <div class="col">{{ form_row(formMairie.numberPeople,{'attr':{'placeholder':'placeholderPeople'|trans}}) }}</div>
                        </div>

                    </div>
                    <div class="form-vous">
                        <h4>{{ 'mairie.vous'|trans }}</h4>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.nameContact,{'attr':{'placeholder':'placeholderContact'|trans}}) }}</div>
                            <div class="col">{{ form_row(formMairie.nameCapacity,{'attr':{'placeholder':'placeholderCapacity'|trans}}) }}</div>
                        </div>
                    </div>
                    <div class="form-coord">
                        <h4>{{ 'mairie.coordonnees'|trans }}</h4>
                        <div class="row">
                            <div class="col">{{ form_row(formMairie.email,{'attr':{'placeholder':'placeholderMail'|trans}}) }}</div>
                            <div class="col">{{ form_row(formMairie.phone,{'attr':{'placeholder':'placeholderPhone'|trans}}) }}</div>
                        </div>

                    </div>
                    <div class="form-mess">
                        <h4>{{ 'mairie.message'|trans }}</h4>
                        {{ form_row(formMairie.message,{'attr':{'placeholder':'placeholderMessage'|trans}}) }}

                    </div>
                    <div>
                        <p>{{ 'mairie.souhait'|trans }}</p>
                        {{ form_row(formMairie.isMeet,{}) }}
                        {{ form_row(formMairie.isMail,{}) }}
                        <div class="form-souhait">
                            {{ form_row(formMairie.submitForm,{'attr':{'class':'btn-form'}}) }}
                        </div>

                        {# {{ form_row(formMairie.Type,{'attr':{'value':'Consommateur'}}) }} #}

                        {{ form_row(formMairie._token) }}
                        {{ form_end(formMairie, {'render_rest': false}) }}
                    </div>
                    <p>
                        {{ 'mairie.texteOutro'|trans }}
                    </p>
                </div>
            </div>
        </section>
    </div>
    {{ encore_entry_script_tags('mairiejs') }}

    <script defer type="application/ld+json">
        {
            "@context": "https://qualidistrib.com",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "Mairie",
                    "item": "https://qualidistrib.com/mairie"
                }
            ]
        }
    </script>
{% endblock %}