{{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>
{{end}}