{{define "driver_availabilities"}}

<div class="bg-white shadow sm:rounded-lg"
  x-data="{
    availabilitiesdialog: false
  }">
  <div class="px-4 py-5 sm:px-6">
    <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Trajets</h2>
  </div>
  <div class="border-t border-gray-200 px-4 py-4 space-y-3">
      {{ range .ViewState.trips }}
      {{$departure := index .Features 0}}
      {{$destination := index .Features 1}}
      {{$schedules := .ExtraMembers.properties.schedules}}
      {{$firstSchedule := index $schedules 0}}
      <div class="border border-gray-200 rounded-2xl p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="flex gap-2">
            {{range $schedules}}
            <span class="inline-flex items-center justify-center w-8 h-8 text-[10px] font-bold bg-co-blue text-white rounded-full leading-none">{{ if eq .day "MON"}}Lu{{ else if eq .day "TUE"}}Ma{{ else if eq .day "WED"}}Me{{ else if eq .day "THU"}}Je{{ else if eq .day "FRI"}}Ve{{ else if eq .day "SAT"}}Sa{{ else if eq .day "SUN"}}Di{{ end }}</span>
            {{end}}
          </div>
          <span class="text-sm font-bold text-gray-900">{{$firstSchedule.time_of_day}}</span>
        </div>
        <div class="relative ml-2">
          <div class="absolute left-[5px] top-[10px] bottom-[10px] w-0.5 bg-co-blue"></div>
          <div class="relative flex items-center gap-3 mb-2">
            <div class="w-3 h-3 rounded-full bg-co-blue shrink-0 z-10"></div>
            <p class="text-sm text-gray-900 truncate" title="{{$departure.Properties.label}}">{{$departure.Properties.label}}</p>
          </div>
          <div class="relative flex items-center gap-3">
            <div class="w-3 h-3 rounded-full border-2 border-co-blue bg-white shrink-0 z-10"></div>
            <p class="text-sm text-gray-500 truncate" title="{{$destination.Properties.label}}">{{$destination.Properties.label}}</p>
          </div>
        </div>
        <div class="mt-3 flex justify-end">
          <a class="text-xs text-gray-400 hover:text-co-red transition-colors" href="/app/organized-carpool/drivers/{{$.ViewState.driver.ID}}/trips/{{.ExtraMembers.id}}/delete">Supprimer</a>
        </div>
      </div>
      {{ end }}
  </div>
    <div class="px-4 py-4 text-center">
      <button type="button" @click="availabilitiesdialog = !availabilitiesdialog"
        class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2">
        {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
        Ajouter un trajet
      </button>
    </div>
  </div>
  <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
       x-show="availabilitiesdialog">
    <div class="fixed inset-0 bg-gray-900 opacity-30 transition-opacity"></div>
                                
    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
        <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
          <div>
            <div class="mt-3 text-center sm:mt-5">
              <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Ajouter un trajet</h3>
                <div class="mt-2">
                  <p class="text-sm text-gray-500">Paramétrer un nouveau trajet du conducteur</p>
                </div>
              </div>
            </div>
          <form method="POST" action="/app/organized-carpool/drivers/{{.ViewState.driver.ID}}/trips" class="my-4">
              <div class="my-8">
                
                    {{ $fieldName := "address_departure" }}
                    {{ template "address_autocomplete" (dict "FieldName" $fieldName "Address" .ViewState.driver.Data.address "FieldLabel" "Départ") }}

              </div>
              <div class="my-8">
                
                    {{ $fieldName := "address_destination" }}
                    {{ template "address_autocomplete" (dict "FieldName" $fieldName "Address" .ViewState.driver.Data.address_destination "FieldLabel" "Destination") }}

              </div>
              <div class="my-4">
                <input name="days.monday" type="checkbox" class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded"> Lundi &nbsp;&nbsp;
                <input name="days.tuesday" type="checkbox" class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded"> Mardi &nbsp;&nbsp;
                <input name="days.wednesday" type="checkbox" class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded"> Mercredi &nbsp;&nbsp;
                <input name="days.thursday" type="checkbox" class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded"> Jeudi &nbsp;&nbsp;
                <input name="days.friday" type="checkbox" class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded"> Vendredi &nbsp;&nbsp;
                <input name="days.saturday" type="checkbox" class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded"> Samedi &nbsp;&nbsp;
                <input name="days.sunday" type="checkbox" class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded"> Dimanche &nbsp;&nbsp;
              </div>
              <div class="my-4 inline-flex justify-items-center">
                <div class="p-1">Aller à :</div>
                <input type="time" id="outwardtime" name="outwardtime" value="08:00"
                       class="shadow-sm focus:ring-co-blue focus:border-co-blue p-1 sm:text-sm border-gray-300 rounded-2xl" />
                
              </div>
              <div class="my-4 inline-flex justify-items-center">
                <div class="p-1">Retour à :</div>
                <input type="time" id="returntime" name="returntime" value="18:00"
                       class="shadow-sm focus:ring-co-blue focus:border-co-blue p-1 sm:text-sm border-gray-300 rounded-2xl" />
                
              </div>
              <div class="mt-5 sm:mt-6">
                <button type="submit" class="inline-flex w-full justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:text-sm">Ajouter</button>
              </div>
              <div class="mt-5 sm:mt-6">
                <button @click="availabilitiesdialog=false" type="button" class="inline-flex w-full justify-center max-w-xs bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Annuler</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
 </div>

{{end}}