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

{% block title %}  Mes rendez-vous {% endblock %}

{% block body %}
<h2 class="text-3xl text-center font-bold my-10">Les rendez-vous de {{ app.user.firstName }}</h2>

<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.dateTime|date("d/m/Y") }}</p>
      <p class="m-1 pl-3 text-xl"><i class="fa-regular fa-clock mr-1"></i>{{ appointment.dateTime|date("H:i") }}</p>
    </div>
    <p class="m-1 pr-3 text-xl">{{ appointment.statu.name }}</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.planing.doctor.firstName }} {{ appointment.planing.doctor.lastName }}</p>
        <p class="m-2 text-lg"><i class="fa-solid fa-location-dot"></i> {{ appointment.planing.doctor.zipCode }}, {{ appointment.planing.doctor.city }}</p>
        <p class="m-2 text-lg"><i class="fa fa-phone"></i> {{ appointment.planing.doctor.phoneNumber }}</p>
        <p class="m-2 text-lg"><i class="fa fa-envelope"></i> {{ appointment.planing.doctor.email }}</p>
      </div>
    </div>

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

                                  
{% endblock %}