{{define "journeys_all"}}
<div>
    {{ if gt (len .ViewState.carpools) 0}}
    {{$carpool := (index .ViewState.carpools 0)}}
    <div class="px-4 pt-4 flex text-sm text-grey-900 font-bold">
        <div class="flex-1">
            {{.IconSet.Icon "tabler-icons:car" "h-6 w-6 inline-flex mr-4"}} Covoiturage
            {{if $carpool.days.monday}}
            entre {{$carpool.outward.monday.mintime}} et {{$carpool.outward.monday.maxtime}}
            {{else if $carpool.days.tuesday}}
            entre {{$carpool.outward.tuesday.mintime}} et {{$carpool.outward.tuesday.maxtime}}
            {{else if $carpool.days.wednesday}}
            entre {{$carpool.outward.wednesday.mintime}} et {{$carpool.outward.wednesday.maxtime}}
            {{else if $carpool.days.thursday}}
            entre {{$carpool.outward.thursday.mintime}} et {{$carpool.outward.thursday.maxtime}}
            {{else if $carpool.days.friday}}
            entre {{$carpool.outward.friday.mintime}} et {{$carpool.outward.friday.maxtime}}
            {{else if $carpool.days.saturday}}
            entre {{$carpool.outward.saturday.mintime}} et {{$carpool.outward.saturday.maxtime}}
            {{else if $carpool.days.sunday}}
            entre {{$carpool.outward.sunday.mintime}} et {{$carpool.outward.sunday.maxtime}}
            {{end}}
            (Temps trajet : {{divideFloat64 $carpool.duration 60.0 | printf "%.0f"}} Minutes)
        </div>
        <div>
            <span class="ml-2 rounded-xl px-2 py-1 bg-co-blue flex items-center justify-center ring-8 ring-white text-sm text-white whitespace-nowrap">
                RIDYGO
            </span>
        </div>
    </div>

    <div class="flex items-center justify-center text-sm my-4">
        <span class="ml-2 mt-1">
            {{$carpool.from.address}}, {{$carpool.from.city}}
        </span>
        {{$.IconSet.Icon "hero:outline/chevron-right" "h-3 w-3 stroke-gray-800 m-2"}}
        <span class="ml-2 mt-1">
            {{$carpool.to.address}}, {{$carpool.to.city}}
        </span>
    </div>

    <div class="p-4 pb-8 flex items-center justify-center">
        <span class="text-xs text-md">Conducteur : </span>
        <span class="ml-2 mt-1 h-5 rounded-xl bg-gray-200 flex items-center justify-center ring-8 ring-white text-black p-2 text-sm">
            {{$carpool.driver.alias}}
        </span>
    </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'">{{ len .ViewState.carpools}} solutions en covoiturage : les voir toutes</button>
    </div>
    

    {{end}}

    {{ if gt (len .ViewState.journeys.Journeys) 0}}
    <div class="px-4 pt-4 flex text-sm text-grey-900 font-bold border-t-2">
        <div class="flex-1">
            {{.IconSet.Icon "tabler-icons:bus" "h-6 w-6 inline-flex mr-4"}}
            {{(timeFrom (index .ViewState.journeys.Journeys 0).Departure).Format "15:04"}} - {{(timeFrom (index .ViewState.journeys.Journeys 0).Arrival).Format "15:04"}}
            ({{(index .ViewState.journeys.Journeys 0).Duration.Minutes | printf "%.0f"}} Minutes)
        </div>
        <div></div>
    </div>
    <div class="p-4 pb-8 flex">
        {{$firstwalk := true}}
        {{range (index .ViewState.journeys.Journeys 0).Sections}}
        {{if eq .Type "street_network"}}
        <span class="ml-2 mt-1 h-5 w-5 rounded-co bg-gray-200 flex items-center justify-center ring-8 ring-white text-white">
            {{$.IconSet.Icon "tabler-icons:walk" "h-4 w-4 stroke-gray-800"}}
        </span>
        {{if $firstwalk}}
        {{$firstwalk = false}}
        {{$.IconSet.Icon "hero:outline/chevron-right" "h-3 w-3 stroke-gray-800 m-2"}}
        {{end}}
        {{end}}
        {{if eq .Type "public_transport"}}
        <span class="ml-2 rounded-xl px-2 py-1 bg-co-blue flex items-center justify-center ring-8 ring-white text-sm text-white whitespace-nowrap">
            {{if eq .Display.Network "Antibes - Envibus"}}Envibus{{else}}{{.Display.Network}}{{end}} Ligne {{.Display.Label}}
        </span>
        {{$.IconSet.Icon "hero:outline/chevron-right" "h-3 w-3 stroke-gray-800 m-2"}}
        {{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.Journeys}} solutions en transports en commun : les voir toutes</button>
    </div>

    {{end}}

    <!--VEHICLES-->
    <div class="px-4 pt-16 flex text-sm text-grey-900  border-t-2">
        <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>
</div>
{{end}}