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

{% block title %}Formulaire de Contact{% endblock %}

{% block body %}
<div class="container mt-5">
    {% for message in app.flashes('success') %}
    <div class="alert alert-success">
        {{ message }}
    </div>
    {% endfor %}

    <h3 style="font-weight:bold; text-align:center;">Contactez-nous</h3>

    <div class="container row">
        <!-- Div 1: Image Google Maps avec lien -->
 <div class="col-12 col-sm-12 col-md-6" style="margin-bottom:2%;">

  <h5 style="text-align:center;">Cabinet chirurgie dentaire Dr MZIOU Nader</h5>

<iframe 
  src="https://www.google.com/maps?q=Cabinet+chirurgie+dentaire+Dr+MZIOU+Nader+82+Av.+Habib+Bourguiba,+Ariana,+Tunis&hl=fr&z=14&output=embed" 
  width="500" 
  height="450" 
  style="border:0; max-width: 100%;"
  allowfullscreen=""
  loading="lazy">
</iframe>



</div>
        <div class="col-12 col-sm-12 col-md-6">
            <div class="p-3 bg-primary text-black text-center" style="background-color:#C5E3E5!important;margin-bottom:2%;">
                {{ form_start(form) }}
                    <div class="mb-3">
                        {{ form_label(form.name) }}
                        {{ form_widget(form.name) }}
                    </div>
                    <div class="mb-3">
                        {{ form_label(form.telephone) }}
                        {{ form_widget(form.telephone) }}
                    </div>
                    <div class="mb-3">
                        {{ form_label(form.email) }}
                        {{ form_widget(form.email) }}
                    </div>
                    <div class="mb-3">
                        {{ form_label(form.message) }}
                        {{ form_widget(form.message) }}
                    </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>

{% endblock %}