{{ define "journeys_public_transit" }}
{{ range .ViewState.journeys }}
<div class="p-4 pb-8">
    <div class="flex text-md text-grey-900 font-bold">
        <div class="flex-1">{{ (timeFrom .StartTime).Format "15:04" }} - {{ (timeFrom .EndTime).Format "15:04" }}</div>
        <div>{{ divideInt .Duration 60 }} Minutes</div>
    </div>
    <div class="flow-root">

        <ul role="list" class="-mb-8">
            {{$firstwalk := true}}
            {{range .Legs}}
            {{if eq .Mode "WALK" }}
            <li>
                <div class="relative py-4">
                    {{if $firstwalk}}
                    {{$firstwalk = false}}
                    <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                    {{end}}
                    <div class="relative flex space-x-3">
                        <div>
                          <span class="ml-2 h-4 w-4 rounded-co bg-gray-200 flex items-center justify-center ring-8 ring-white text-white">
                            {{$.IconSet.Icon "tabler-icons:walk" "h-3 w-3 stroke-gray-800"}}
                          </span>
                        </div>
                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                          <div>
                            <p class="text-xs text-gray-500">Marcher  <a href="#" class="font-medium text-gray-900">{{ .Distance }}m</a></p>
                          </div>
                        </div>
                      </div>
                </div>
            </li>
            {{end}}
            {{if eq .Mode "BUS"}}
            <li>
                <div class="relative py-4">
                    <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                    <div class="relative flex space-x-3">
                        <div>
              <span class="h-8 w-8 rounded-co bg-co-blue flex items-center justify-center ring-8 ring-white" style="background-color: #{{.RouteColor}}">
                            {{$.IconSet.Icon "tabler-icons:bus" "h-5 w-5 stroke-white"}}
                          </span>
                        </div>
                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                            <div>
                              <p class="text-md text-gray-500">{{.AgencyName}} <a href="#" class="font-medium text-gray-900">Ligne {{.RouteShortName}}</a></p>
                            </div>
                        </div>
                      </div>
                      <div class="ml-16 pt-2">
                        <div>
                            <p class="text-sm text-gray-500">Départ <a href="#" class="font-medium text-gray-900">{{.StartTime.Format "15:04"}}</a> - Arrivée <a href="#" class="font-medium text-gray-900">{{.EndTime.Format "15:04"}}</a></p>
                          </div>
                          <div>
                            <p class="text-sm text-gray-500">De <a href="#" class="font-medium text-gray-900">{{.From.Name}}</a> à <a href="#" class="font-medium text-gray-900">{{.To.Name}}</a></p>
                          </div>
                          <div>
                            <p class="text-sm text-gray-500">Direction <a href="#" class="font-medium text-gray-900">{{.Headsign}}</a></p>
                          </div>
                      </div>
                </div>
            </li>
            {{end}}
            {{end}}
        </ul>
    </div>

</div>
{{ end }}
{{ end }}