{% extends "base.html.twig" %}
{% block content %}
{% include "fragments/_banner.html.twig" %}
{% if content.article %}
<div class="container-fluid intro dark">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 mb-3 p-5">
{{ content.article|raw }}
</div>
</div>
</div>
</div>
{% endif %}
{% set markers = [] %}
<section class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-5">
<h2 class="fs-2 mb-4 text-primary border-bottom border-primary border-2 pb-3">{% trans %}Contactez-nous{% endtrans %}</h2>
{% if app.request.get('send') != 'true' %}
{# FORM THEME #}
{% form_theme content.form 'form_theme.html.twig' %}
{{ form(content.form, {attr:{'class':'row'}}) }}
{% else %}
<div class="alert alert-success">
<h3 class="alert-heading fs-4 m-0">{% trans %}Message envoyé{% endtrans %}</h3>
{{ view.form.entity.successText|raw }}
</div>
{% endif %}
</div>
<div class="col-lg-7 agences">
<h2 class="fs-2 mb-4 text-primary border-bottom border-primary border-2 pb-3">{% trans %}Nos agences{% endtrans %}</h2>
{% for account in content.accounts %}
<div class="account mb-3 card border-0 anim-fade anim-stagger">
<div class="card-header text-center border-primary">
<h2 class="fs-4 m-0">{{ account.name }}</h2>
</div>
<div class="card-body d-lg-flex">
{% for address in account.addresses %}
<div class="col-lg-4 adresse px-4 anim-fade-{{ loop.index is odd ? 'right' : 'left' }}">
<h3 class="card-title fs-6 fw-bold">{{ address.title }}</h3>
{{ [address.street,[address.zip,address.city]|join(' - ')]|join(' ',' <br> ')|raw }}
<br>
{% if address.note %}<i class="fa fa-mobile-alt me-3"></i>{{ address.note }}{% endif %}
</div>
{% endfor %}
</div>
</div>
{% set markers = markers|merge(account.addresses|map(a => {lat:a.latitude,lng:a.longitude,adresse:[a.street,a.zip,a.city]|join(' ')})) %}
{% endfor %}
</div>
</div>
</section>
<section class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div class="map" id="map-contact" data-markers="{{ markers|default([])|json_encode }}" data-object="map">
</div>
</div>
</div>
</section>
{% endblock %}