{{define "content"}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
    <h1 class="text-2xl font-semibold text-gray-900">
      Transport solidaire 
    </h1>
      {{ if eq .ViewState.booking.Status "WAITING_CONFIRMATION"}}
      <div class="mt-4"><span class="p-2 text-sm bg-gray-300 rounded-2xl px-4">Attente confirmation</span></div>
      {{ else if eq .ViewState.booking.Status "VALIDATED"}}
      <div class="mt-4"><span class="p-1 text-sm bg-co-green rounded-2xl px-4">Validé</span></div>
      {{ else if eq .ViewState.booking.Status "CANCELLED"}}
      <div class="mt-4"><span class="p-1 text-sm bg-co-red text-white rounded-2xl px-4">Annulé</span></div>
      {{ end }}
<div
  class="mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3">
  <!-- <button type="button"
       class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Supprimer</button> -->
  {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION" }}
  <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/confirm" class="inline-flex"><button type="button"
     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Confirmer</button></a>
  {{end}}
  {{if ne .ViewState.booking.Status "WAITING_CONFIRMATION" }}
  <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/waitconfirmation" class="inline-flex"><button type="button"
     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Remettre en attente</button></a>
  {{end}}
  {{if ne .ViewState.booking.Status "CANCELLED" }}
  <a href="/app/solidarity-transport/bookings/{{.ViewState.booking.Id}}/cancel" class="inline-flex"><button type="button"
     class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-red hover:bg-co-red focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Annuler</button></a>
  {{end}}
</div>
</div>
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
  {{template "journey_preview" (dict "driver_journey" .ViewState.booking.Journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries)}}
</div>

{{ end }}