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

{% block title %}Nos actes{% endblock %}

{% block body %}
<!-- About Section -->
    <section id="about" class="about section">

      <div class="container">

        <div class="">
 <h3 style="text-transform:uppercase; font-weight:bold; text-align:center;">Nos actes médicaux</h3>
            <p style="text-align:center;">
              Nos actes médicaux à votre disposition.
            </p>

            <div class="content" data-aos="fade-up" data-aos-delay="100">
            <ul class="row">
            {% for acte_medical in actesMedicaux %}
	  
            <li class="col-md-6 col-12 content" style="float:right;">
                <i class="fa-solid fa-vial-circle-check"></i>
                <div>
                    <h5>{{ acte_medical.nom }}</h5>
                    <p style="text-align:justify;">
                        {{ acte_medical.description }}
                    </p>
                    {% if acte_medical.image %}
                        <img src="{{ asset('upload/images/' ~ acte_medical.image) }}" alt="Image de {{ acte_medical.nom }}" style="max-width: 100%;">
                    {% endif %}
                </div>
            </li>
		
        
        {% endfor %}
	     
 		
	</ul>
	
          </div>


        </div>

      </div>

    </section><!-- /About Section -->
</section><!-- /About Section -->
   
    <!-- Appointment Section -->
    <section id="appointment" class="appointment section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>Rendez vous</h2>
        <p>Choisissez une date pour votre visite à notre cabinet dentaire</p>
      </div><!-- End Section Title -->

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <form action="forms/appointment.php" method="post" role="form" class="php-email-form">
          <div class="row">
            <div class="col-md-4 form-group">
              <input type="text" name="name" class="form-control" id="name" placeholder="Votre nom" required="">
            </div>
            <div class="col-md-4 form-group mt-3 mt-md-0">
              <input type="email" class="form-control" name="email" id="email" placeholder="Votre mail" required="">
            </div>
            <div class="col-md-4 form-group mt-3 mt-md-0">
              <input type="tel" class="form-control" name="phone" id="phone" placeholder="Votre numéro de téléphone" required="">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4 form-group mt-3">
              <input type="datetime-local" name="date" class="form-control datepicker" id="date" placeholder="La date du rendez vous" required="">
            </div>
            <div class="col-md-4 form-group mt-3">
              
            </div>
            <div class="col-md-4 form-group mt-3">
              
            </div>
          </div>

          <div class="form-group mt-3">
            <textarea class="form-control" name="message" rows="5" placeholder="Votre message (Optionnel)"></textarea>
          </div>
          <div class="mt-3">
            <div class="loading">Loading</div>
            <div class="error-message"></div>
            <div class="sent-message">Votre rendez vous est enregistré avec succés. Merci</div>
            <div class="text-center"><button type="submit">Demandez un rendez vous</button></div>
          </div>
        </form>

      </div>

    </section><!-- /Appointment Section -->
{% endblock %}