
{{define "main"}}
<html class="h-full bg-gray-50">
    <head>
        <title>PARCOURSMOB</title>
        <link rel="stylesheet" href="/public/css/main.css" />
  <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/maplibre-gl@^5.2.0/dist/maplibre-gl.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/@kingshott/iodine@8.1.0/dist/iodine.min.umd.js" defer></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@^5.2.0/dist/maplibre-gl.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/pmtiles@^4.3.0/dist/pmtiles.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@protomaps/basemaps@5/dist/basemaps.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/polyline@0.2.0/src/polyline.js"></script>
  <meta name=viewport content="width=device-width" />
  <!--<script defer type="text/javascript" src="/public/js/main.js" defer></script>-->
    </head>
    <body class="h-full">
      <div class="flex flex-col justify-center py-12">
            <div class="">
              <h2 class="m-4 mt-6 text-center text-3xl font-extrabold text-gray-900">Demande de trajet solidaire</h2>
              <p class="m-4 text-center">
              {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION"}}
                Vous avez une nouvelle demande de trajet
              {{else if eq .ViewState.booking.Status "VALIDATED"}}
                Demande déjà validée 
              {{else if eq .ViewState.booking.Status "CANCELLED"}}
                Trajet annulé
              {{end}}
              </p>
      </div>
      <div class="h-50 w-full">
  {{template "journey_map" (dict "driver_journey" .ViewState.booking.Journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries)}}
      </div>
       <div class="grid grid-cols-1">
                    <div class="p-4 py-5 sm:px-6">
                        <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                            <div class="sm:col-span-1">
                                <dt class="font-medium text-gray-500">Type de de trajet</dt>
                                {{if .ViewState.booking.Journey.Noreturn}}<dd class="mt-1 text-gray-900">Aller simple (pas de retour)</dd>
              {{else}}<dd class="mt-1 text-gray-900">Aller-retour ({{.ViewState.booking.ReturnWaitingDuration | shortDuration}} d'attente estimée sur place)</dd>{{end}}
                            </div>
                            <div class="sm:col-span-1">
                                <dt class="font-medium text-gray-500">Passager</dt>
                                <dd class="mt-1 text-gray-900">{{.ViewState.passenger.Data.first_name}} {{.ViewState.passenger.Data.last_name}}</dd>
                            </div>
                            <div class="sm:col-span-1">
                                <dt class="font-medium text-gray-500">Lieu de récupération du passager</dt>
                                <dd class="mt-1 text-gray-900">{{.ViewState.booking.Journey.PassengerPickup.Properties.label}}</dd>
                            </div>
                            <div class="sm:col-span-1">
                                <dt class="font-medium text-gray-500">Lieu de destination</dt>
                                <dd class="mt-1 text-gray-900">{{.ViewState.booking.Journey.PassengerDrop.Properties.label}}</dd>
                            </div>
                            <div class="sm:col-span-1">
                                <dt class="font-medium text-gray-500">Date et heure du rendez-vous</dt>
                                <dd class="mt-1 text-gray-900">{{ timeFormat .ViewState.booking.Journey.PassengerPickupDate "02/01/2006 15:04"}}</dd>
                            </div>
                            {{if eq .ViewState.booking.Status "VALIDATED"}}
                            <div class="sm:col-span-1">
                                <dt class="font-medium text-gray-500">Numéro de téléphone du passager</dt>
                                <dd class="mt-1 text-co-blue"><a href="tel:{{.ViewState.passenger.Data.phone_number}}">{{ .ViewState.passenger.Data.phone_number}}</a></dd>
                            </div>
                            {{end}}
                        </dl>
                    </div>
  <div>
          </div>
          <div class="flex flex-col justify-center m-4 sm:flex-row">
              {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION"}}
          <form method="POST">
              <input type="hidden" name="action" value="confirm" />
    {{template "submit_with_sms" 
      dict  "IconSet" .IconSet 
            "Viewstate" .ViewState 
            "ComponentState" (dict "submitText" "Valider"
                                   "headerText" "Validez le trajet" 
                                   "infoText" "Le message suivant sera envoyé à votre passager. Vous pouvez le personnaliser.") 
            "SMSState" (dict "name" (.ViewState.config.GetString "service_name") 
                             "driver_first_name" .ViewState.driver.Data.first_name
                             "driver_last_name" .ViewState.driver.Data.last_name
                             "address" .ViewState.booking.Journey.PassengerDrop.Properties.label
                             "date" (timeFormat .ViewState.booking.Journey.PassengerPickupDate "02/01/2006 15:04")
                             "phone_number" .ViewState.driver.Data.phone_number)}}
            </form>
          <form method="POST">
              <input type="hidden" name="action" value="cancel" />
            <button type="submit"
              class="m-4 inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-red px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-red focus:ring-offset-2 sm:w-auto">
              Refuser
                          </button>
            </form>
              {{end}}
            </div>
      </div>
    </body>
</html>
{{end}}
