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

{% block title %}A propos{% endblock %}

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

      <div class="container">

        <div class="row gy-4 gx-5">

          <div class="col-lg-12 position-relative align-self-start" data-aos="fade-up" data-aos-delay="200">
            <img src="assets/img/about.jpg" class="img-fluid" alt="">
            <a href="https://www.youtube.com/watch?v=KsPF2yqsFk4" class="glightbox pulsating-play-btn"></a>
          </div>

          <div class="col-lg-12 col-12 content" data-aos="fade-up" data-aos-delay="100">
            <h3>A propos de Nader Meziou</h3>
            <p>
              Les services de Dr Nader Mziou.
            </p>
            <ul class="row">
		 {% for categactesmedical  in categactesmedicaux %}
              <li class="col-md-6 col-12">
                <i class="fa-solid fa-pump-medical"></i>
                <div>
                  <h5>{{ categactesmedical.categorie }}</h5>
                  <p style="text-align:justify;">{{ categactesmedical .description }}</p>
                </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 %}