{% 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 %}
    <section class="container">
        {{ breadcrumbs.breadcrumb(crumbs) }}
        <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.</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 par téléphone : <b> {{ app_site.phone|phonePretty }} </b>.
                    </p>
                {% endif %}
                <div class="card p-3">
                    {{ include('@Contact/front/_form.html.twig') }}
                </div>
            </div>
            <div class="col-4">
                <address>
                    {{ app_site.title }}<br>
                    {{ app_site.address }}<br>
                    {{ app_site.zipCode }} {{ app_site.city }}
                </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.svg') }}"
                                 data-shadow="{{ asset('assets/poi_shadow.svg') }}"
                                 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>
{% endblock %}

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

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