{{define "beneficiary_events"}}
{{ $calendarIcon := .IconSet.Icon "hero:outline/calendar" "h-6 w-6" }}
{{ $carIcon := .IconSet.Icon "tabler-icons:car" "h-6 w-6"}}
<div class="bg-white shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:px-6">
        <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Actions réalisées</h2>
    </div>
    <div class="border-t border-gray-200">
        {{ $eventCount := len .ViewState.event }}
        <ul role="list" class="divide-y divide-gray-200 flex-1">
            {{if eq $eventCount 0}} 
                <li class="py-2 px-4">
                    <p class="py-5 mt-1 max-w-2xl text-sm text-gray-500">Aucun dispositif n'est prévu pour le moment.</p>
                </li>
            {{else}}
                {{range .ViewState.event}}
                {{if eq .Deleted false}}
                    <li class="py-5 px-4 flex">
                        <a href="{{.Db}}{{.ID}}" class="flex w-full">
                            <div class="flex-1 ml-3">
                                <div class="flex items-center">

                                    {{if eq .Status 2}}
                                        {{if eq .Icons "vehicle"}}
                                            <span class="bg-co-green text-white rounded-full h-8 w-10 flex items-center justify-center">{{$carIcon}}</span>
                                        {{else}}
                                            <span class="bg-co-green text-white rounded-full h-8 w-10 flex items-center justify-center">{{$calendarIcon}}</span>
                                        {{end}}
                                    {{end}}

                                    {{if eq .Status 1}}
                                        {{if eq .Icons "vehicle"}}
                                            <span class="bg-co-blue text-white rounded-full h-8 w-10 flex items-center justify-center">{{$carIcon}}</span>
                                        {{else}}
                                            <span class="bg-co-blue text-white rounded-full h-8 w-10 flex items-center justify-center">{{$calendarIcon}}</span>
                                        {{end}}
                                    {{end}}

                                    {{if eq .Status 3}}
                                        {{if eq .Icons "vehicle"}}
                                            <span class="bg-gray-500 text-white rounded-full h-8 w-10 flex items-center justify-center">{{$carIcon}}</span>
                                        {{else}}
                                            <span class="bg-gray-500 text-white rounded-full h-8 w-10 flex items-center justify-center">{{$calendarIcon}}</span>
                                        {{end}}
                                    {{end}} 

                                    {{if eq .Date .DateEnd}}
                                        <p class="text-sm font-medium text-gray-500"> &ensp;le {{(timeFrom .Date).Format "02/01/2006"}}</p>
                                    {{else}}
                                        <p class="text-sm font-medium text-gray-500">&ensp;du {{(timeFrom .Date).Format "02/01/2006"}} au {{(timeFrom .DateEnd).Format "02/01/2006"}}</p>
                                    {{end}}
                                </div>
                                <p class="mt-1 text-sm text-gray-900">{{.Type}} - {{.Name}}</p>
                            </div>
                        </a>
                    </li> 
                {{end}}
                {{end}}
            {{end}}
        </ul>
    </div>
      <div class="max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8">
        <div class="flex items-center space-x-5">
            <div class="flex-shrink-0">
                <div class="relative">
                    <span class="absolute inset-0 shadow-inner rounded-full" aria-hidden="true"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8">
        <div class="flex items-center space-x-5">
            <div class="flex-shrink-0">
                <div class="relative">
                    <!-- <img class="h-16 w-16 rounded-co" src="/app/beneficiaries/solidarity_service{{.ViewState.Passenger.Id}}/picture" alt=""> -->
                    <span class="absolute inset-0 shadow-inner rounded-full" aria-hidden="true"></span>
                </div>
            </div>
        </div>
        <div
            class="mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3">
        </div>
    </div>
</div>
{{end}}