{{define "journeys_all"}}
<div>
    {{ if gt (len .ViewState.carpools) 0}}
    <div class="px-4 pt-4 flex text-sm text-grey-900">
        <div class="flex-1">
            {{.IconSet.Icon "tabler-icons:car" "h-6 w-6 inline-flex mr-4"}}
            <span class=" font-bold">{{len .ViewState.carpools}} trajets disponibles</span> sur les applications de covoiturage.
        </div>
        <div></div>
    </div>

    <div class="p-4 text-center">
        <button class="rounded-xl text-md px-4 py-1 bg-gray-200 text-co-blue" @click="tab = 'carpool'">Voir les trajets disponibles</button>
    </div>
    

    {{end}}

    {{ if and .ViewState.journeys (gt (len .ViewState.journeys) 0)}}
    {{$itinerary := index .ViewState.journeys 0}}
    <div class="px-4 pt-4 flex text-sm text-grey-900 font-bold">
        <div class="flex-1">
            {{.IconSet.Icon "tabler-icons:bus" "h-6 w-6 inline-flex mr-4"}}
            {{$itinerary.StartTime.Format "15:04"}} - {{$itinerary.EndTime.Format "15:04"}}
            ({{divideInt $itinerary.Duration 60}} Minutes)
        </div>
        <div></div>
    </div>
    <div class="p-4 pb-8 flex">
        {{range $itinerary.Legs }}
        {{if or (or (or (eq .Mode "BUS") (eq .Mode "REGIONAL_FAST_RAIL")) (eq .Mode "REGIONAL_RAIL") (eq .Mode "COACH")) }}
        <!--<span class="ml-2 px-2 py-1 text-sm text-gray-500 whitespace-nowrap">
        {{.AgencyName}} 
        </span>-->
    <span class="ml-2 rounded-xl px-2 py-1 flex items-center justify-center ring-8 ring-white text-sm whitespace-nowrap" style="background-color: #{{.RouteColor}}; color: #{{.RouteTextColor}}">
            {{.RouteShortName}}
        </span>
        {{end}}
        {{end}}
        <div class="flex-1"></div>
        <button class="text-sm px-2 py-1 bg-gray-200 text-co-blue rounded-xl" @click="tab = 'public-transit'">Voir le détail</button>
    </div>
    <div class="p-4 text-center">
        <button class="rounded-xl text-md px-4 py-1 bg-gray-200 text-co-blue" @click="tab = 'public-transit'">{{ len .ViewState.journeys}} solutions en transports en commun : les voir toutes</button>
    </div>

    {{end}}

  {{if moduleAvailable "organized_carpool"}}
  {{template "journeys_organized_carpool" .}}
  {{end}}

  {{if moduleAvailable "solidarity_transport"}}
  {{template "journeys_solidarity_transport" .}}
  {{end}}

  {{if moduleAvailable "vehicles"}}
    <!--VEHICLES-->
    <div class="px-4 pt-16 flex text-sm text-grey-900">
        <div class="flex-1">
            {{.IconSet.Icon "tabler-icons:car" "h-6 w-6 inline-flex mr-4"}}
            <span class=" font-bold">{{len .ViewState.vehicles}} véhicules</span> partagés disponibles ce jour là et la semaine suivante
        </div>
        <div></div>
    </div>
    <div class="p-4 text-center">
        <a href="/app/vehicles/"><button class="text-md px-4 py-1 bg-gray-200 text-co-blue rounded-xl">Réserver un véhicule</button></a>
    </div>
  {{end}}
</div>
{{end}}