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

{% block title %}  Liste des rendez-vous {{ parent() }} {% endblock %}

{% block body %}
<h2 class="text-5xl lg:text-3xl text-center font-bold my-10">Les rendez-vous
{% if appointments is not empty %}
 de {{ appointments[0].user.firstName }}
{% endif %}
</h2>

{% if appointments is empty %}
<div>
    <p class="text-center text-5xl lg:text-3xl">Aucun rendez-vous n'a été trouvé</p>
</div>
{% endif %}

<div class=" mt-10 p-4 px-72">
    {% for appointment in appointments %}

     <div class="border rounded-t-2xl rounded-b-2xl shadow bg-white mb-12">
  <div class="rounded-t-2xl bg-teal-600 py-3 flex flex-row justify-between items-center">
    <div class="flex flex-row">
      <p class="m-1 pl-3 text-xl"><i class="fa-regular fa-calendar mr-1"></i>{{ appointment.date|date("d/m/Y") }}</p>
      <p class="m-1 pl-3 text-xl"><i class="fa-regular fa-clock mr-1"></i>{{ appointment.time|date("H:i") }}</p>
    </div>
    <p class="m-1 pr-3 text-xl">{{ appointment.status.value }}</p>
  </div>
  <div class="flex justify-between items-end p-5">
    <div class="flex flex-row">
      <i class="fa-solid fa-user-doctor text-7xl "></i>
      <div class="pl-5">
        <p class="text-lg">Docteur</p>
        <p class="font-bold text-lg">{{ appointment.doctor.user.firstName }} {{ appointment.doctor.user.lastName }}</p>
        <p class="m-2 text-lg"><i class="fa-solid fa-location-dot"></i> {{ appointment.doctor.user.zipCode }}, {{ appointment.doctor.user.city }}</p>
        <p class="m-2 text-lg"><i class="fa fa-phone"></i> {{ appointment.doctor.user.phoneNumber }}</p>
        <p class="m-2 text-lg"><i class="fa fa-envelope"></i> {{ appointment.doctor.user.email }}</p>
      </div>
    </div>

    <!-- Button  -->
     {{include('appointment/_delete_form.html.twig')}}  
     </div>
</div>
    {% endfor %}
</div>

                                  
{% endblock %}