{% 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 %}

       <h5 class="text-center mb-4">Contact</h5>
<div class="container row">
    <!-- Div 1 -->
<div class="col-6 col-sm-12 col-md-6">
    <div class="p-3 zoomable-container text-white text-center" 
         style="background-color:#C5E3E5!important; transition: transform 0.5s ease;">
        <h5 class="text-center">Notre emplacement</h5>
        <img src="{{ asset('assets/img/googlemap.png') }}" 
             alt="Zoom Image" 
             class="zoomable-img" 
             style="width:100%; cursor: pointer; transition: transform 0.5s ease, opacity 0.5s ease;" />
    </div>
</div>


      <div class="col-12 col-sm-6 col-md-6">
        <div class="p-3 bg-primary text-black text-center" style="background-color:#C5E3E5!important;">
		{{ form_start(form) }}
                <div class="mb-3">
                    {{ form_label(form.name) }}
                    {{ form_widget(form.name) }}
                </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 2 -->
     
    </div>
  </div>
    </div>

<style>
/* Add 3D perspective to the container */
.zoomable-container {
    perspective: 1000px; /* Adds depth for 3D effect */
}

.zoomable-container:hover {
    transform: scale(1.1) rotateX(5deg) rotateY(5deg); /* Slight 3D tilt on hover */
}

/* Add zoom effect to the image */
.zoomable-img:hover {
    transform: scale(1.3); /* Image zooms in slightly more than the container */
    opacity: 0.9; /* Optional: Dim the image slightly for smoothness */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Add shadow for elegance */
}

/* Optional smooth shadow effect for the container */
.zoomable-container:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); /* Adds shadow when zoomed */
}
</style>

{% endblock %}