{% set content = getContent() %}
<div class="footer">
    <div class="container2">
        <div class="row">
            <div class="col-xl-2 col-lg-12 col-md-12 col-xs-12 text-xl-start text-center left-footer">
                <div class="logoF">
                    <a href="{{ path('app_index') }}"><img class="logo" data-src="{{ asset(elemGraph ~ content['header']['logo']) }}" alt="logo"></a>
                </div>
                <div class="text-footer mt-4">Fabrication et<br>aménagements intérieurs<br>professionnels sur mesure.</div>
            </div>
            <div class="col-xl-8 col-lg-12 col-md-12 col-xs-12 copyright">
                <div class="row">
                    <div class="col-xl-4 col-lg-4 col-md-12 col-xs-12 text-xl-start text-lg-start text-center middle-footer">
                        <div class="titreF">Menu</div>
                        <div class="">
                            {% for category in getCat() %}
                            <li class="nav-link">
                                {% if category.url %}
                                <a  href="{{ path(category.url) }}">{{ category.translations[app.request.locale].name }}</a>
                                {% else %}
                                    <a  href="{{ path('article', {'slug':category.translations[app.request.locale].slug, 'id':category.id}) }}">{{ category.translations[app.request.locale].name }}</a>
                                {% endif %}
                            </li>
                            {% endfor %}
                        </div>

                        <div class="reference">
                            {% for ville in getVilleRef() %}
                            <div class="ville">
                                <a href="{{ path('app_article_ref', {'id':ville.article.id, 'slug':ville.slug}) }}">{{ ville.name }}</a>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-12 col-xs-12 text-xl-start text-lg-start text-center">
                        <div class="titreF">Pinarello</div>
                        <div class="">
                            {% for category in getCatAllParentId(68) %}
                            <li class="nav-link">
                                {% if category.url %}
                                <a  href="{{ path(category.url) }}">{{ category.translations[app.request.locale].name }}</a>
                                {% else %}
                                    <a  href="{{ path('article', {'slug':category.translations[app.request.locale].slug, 'id':category.id}) }}">{{ category.translations[app.request.locale].name }}</a>
                                {% endif %}
                            </li>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-12 col-xs-12 text-xl-start text-lg-start text-center">
                        <div class="divCoord">
                            <div class="titreF">Contact</div>
                            <div class="adresse">{{ getCoord().adresse }} {{ getCoord().cp }} {{ getCoord().ville }}</div>
                            <div class="tel pt-2">
                                <a href="tel:{{getCoord().tel1|replace({'.':''})|replace({' ':''})}}">{{ getCoord().tel1 }}</a>
                            </div>
                            <div class="tel pt-2">
                                <a href="mailto:{{getCoord().email}}">{{ getCoord().email }}</a>
                            </div>
                        </div>
                        <div class="divCoord">
                            <div class="titreF">Horaires</div>
                            <div class="horaires">{{ getCoord().horaires|raw }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-lg-12 col-md-12 col-xs-12 d-flex align-items-center justify-content-xl-end justify-content-center text-xl-start text-lg-start text-center right-footer">
                <div>
                    <div class="text-xl-start text-lg-center text-center">
                        <a href="{{ path('app_contact')}}" class="bouton d-inline-flex align-items-center">contact / devis</a>
                    </div>
                    <div class="description-footer text-center text-lg-center text-xl-start">
                       Un projet ? Besoin d'aménager<br>vos espaces ?<br>Demandez votre devis gratuit et<br>personnalisé des maintenant !
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-footer">
            <div class="row d-flex align-items-center">
                <div class="col-xl-2 col-lg-2 col-md-12 col-12"></div>
                <div class="col-xl-8 col-lg-8 col-md-12 col-12 d-flex align-items-center justify-content-center middle-bottom-footer">
                    <a href="{{ path('app_index') }}">Mentions Legales</a>
                    <a href="{{ path('app_index') }}">CGV</a>
                    <a href="{{ path('app_index') }}">CGU</a>
                    <a href="{{ path('app_index') }}" class="textCopyright">{{ "now"|date('Y') }} © {{ getCoord().getNameCompany }}</a>
                </div>
                <div class="col-xl-2 col-lg-2 col-md-12 col-12 reseauxF pt-xl-0 pt-lg-0 pt-md-4 pt-4 text-xl-end text-lg-end text-center">
                    <div class="lienReseauxF">
                        <a href="{{ getCoord().facebook }}" target="_blank"><img class="logo" data-src="{{ asset(elemGraph ~content['main']['facebook']) }}" alt="facebook"></a>
                        <a href="{{ getCoord().instagram }}" target="_blank"><img class="logo" data-src="{{ asset(elemGraph ~ content['main']['instagram']) }}" alt="instagram"></a>
                        <a href="{{ getCoord().linkedin }}" target="_blank"><img class="logo" data-src="{{ asset(elemGraph ~ content['main']['linkedin']) }}" alt="linkedin"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-xl-none d-lg-none d-md-block d-block position-fixed bottom-0 start-0 end-0 z-3">
    <div class="row d-flex">
        {% if getCoord().tel1 %}
        <div class="callAction-phone">
            <a class="d-flex flex-column align-items-center justify-content-center" href="tel:{{getCoord().tel1|replace({'.':''})|replace({' ':''})}}"><img class="mb-2" data-src="{{ asset(elemGraph ~ content['header']['tel']) }}" alt="telephone">{{ getCoord().tel1 }}</a>
        </div>
        {% endif %}
        {% if getCoord().tel2 %}
        <div class="callAction-phone">
            <a class="d-flex flex-column align-items-center justify-content-center" href="tel:{{getCoord().tel2|replace({'.':''})|replace({' ':''})}}"><img class="mb-2" data-src="{{ asset(elemGraph ~ content['header']['tel']) }}" alt="telephone">{{ getCoord().tel2 }}</a>
        </div>
        {% endif %}
        <div class="callAction-phone">
            <a class="d-flex flex-column align-items-center justify-content-center" href="{{ getCoord().mapUrl }}" target="_blank" rel="noreferrer nofollow"><img class="mb-2" data-src="{{ asset(elemGraph ~ content['header']['loc']) }}" alt="adresse">Adresse</a>
        </div>
    </div>
</div>