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

{% block title %}{{ 'Nous contacter'|trans }}{% endblock %}

{% import 'macros/breadcrumbs.html.twig' as breadcrumbs %}
{% set crumbs = [
    { 'title': 'Accueil'|trans, 'url': path('home_index') },
    { 'title': "Nous contacter"|trans, 'url':  null },
] %}

{% block body %}
    <div class="">
        <div class="container">
            {{ breadcrumbs.breadcrumb(crumbs) }}
        </div>
        <div class="section_light top_snow">
            <section class="container">
                <h1>{{ "Besoin d'informations ?"|trans }}</h1>
                <div class="row">
                    <div class="col">
                        <p>{{"Vous avez des questions ou besoin de plus d'informations ? N'hésitez pas à remplir le formulaire ci-dessous."|trans}}</p>
                        {% if app_site.phone is defined %}
                            <p>{{"Pour toute demande urgente ou si vous préférez échanger directement, n'hésitez pas à nous contacter"|trans}} <br>{{'par téléphone'|trans}} <a href="tel:{{ app_site.phone|phoneFormat }}"><b>{{ app_site.phone|phonePretty }}</b></a>.</p>
                        {% endif %}
                        <div class="card p-3">
                            {{ include('@Contact/front/_form.html.twig') }}
                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <address>
                            {{ app_site.title }}<br>
                            {{ app_site.address }}<br>
                            {{ app_site.zipCode }} {{ app_site.city }} ({{ app_site.country }})
                        </address>
                        {% if app_modules.map is defined and app_modules.map == true %}
                            {% if app_site.latitude and app_site.longitude %}
                                <div class="js-poi-list">
                                    <div class="d-none js-marker" data-id="site"
                                         data-lat="{{ app_site.latitude }}"
                                         data-lon="{{ app_site.longitude }}" data-name="{{ app_site.title }}"
                                         data-icon="{{ asset('assets/poi.png') }}"
                                         data-shadow="{{ asset('assets/poi_shadow.png') }}"
                                         data-address="{{ app_site.fullAddress }}">{{ app_site.title }}
                                    </div>
                                    <div class="js-map" data-target=".js-poi-list" id="map" style="height:55vh"></div>
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </section>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('poi-map') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('poi-map') }}
{% endblock %}