{{define "booking_status_history"}}
{{if eq .ViewState.status_management "manual"}}
{{if .ViewState.booking.StatusHistory}}
<div class="py-4 sm:py-5">
    <p class="text-sm font-medium text-gray-500 mb-4">Historique des statuts</p>
    <div class="flow-root">
        <ul role="list" class="-mb-8">
            {{range .ViewState.booking.StatusHistory}}
            <li>
                <div class="relative pb-8">
                    <div class="relative flex space-x-3">
                        <div>
                            <span class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center ring-8 ring-white">
                                <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
                                </svg>
                            </span>
                        </div>
                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                            <div>
                                <p class="text-sm text-gray-500">
                                    {{if .FromStatus}}{{$from := .FromStatus}}{{range $.ViewState.status_options}}{{if eq (index . "name") $from}}{{index . "label"}}{{end}}{{end}} &rarr; {{end}}{{$to := .ToStatus}}{{range $.ViewState.status_options}}{{if eq (index . "name") $to}}{{index . "label"}}{{end}}{{end}}
                                    par <a href="/app/members/{{.UserID}}" class="font-medium text-co-blue hover:underline">{{.UserName}}</a>
                                    ({{.GroupName}})
                                </p>
                                {{if .Comment}}
                                <p class="mt-1 text-xs text-gray-400">{{.Comment}}</p>
                                {{end}}
                            </div>
                            <div class="whitespace-nowrap text-right text-sm text-gray-500">
                                {{.Date.Format "02/01/2006 15:04"}}
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            {{end}}
        </ul>
    </div>
</div>
{{end}}
{{end}}
{{end}}