{{define "booking_diags"}}
{{ $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 flex items-center space-x-5 sm:px-6">
        <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Diagnostics réalisés</h2>
        <a href="{{.ViewState.booking.ID}}/create-diag">
            <button type="button"
            class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto">
            {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
            Créer un diagnostic
            </button>
        </a>
    </div>
    <div class="border-t border-gray-200">
        {{ $diagCount := len .ViewState.diags }}
        <ul role="list" class="divide-y divide-gray-200 flex-1">
            {{if eq $diagCount 0}}
                <li class="py-2 px-4">
                    <p class="py-5 mt-1 max-w-2xl text-sm text-gray-500">Aucun diagnostique effectué pour le moment.</p>
                </li>
            {{else}}
                {{range .ViewState.diags}}
                {{ $diags := .ID }}
                {{if eq .Deleted false}}
                    <li class="py-5 px-4 flex">
                            <div class="flex-1 ml-3">
                                <a href="/app/diags/{{$diags}}" class="mt-1 text-sm text-gray-900">{{.Name}}</a>
                            </div>
                            <div class="flex-1 ml-3">
                                <p class="mt-1 text-sm text-gray-900">{{(timeFrom .Diagdate).Format "02/01/2006"}}</p>
                            </div>
                            <a href="/app/diags/{{$diags}}" target="_blank">
                                <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30">Voir<span class="sr-only"> le diagnostic</span></button>
                            </a>
                    </li>
                {{end}}
                {{if eq .Deleted true}}
                    <li class="py-5 px-4 flex">
                            <div class="flex-1 ml-3">
                                <p class="mt-1 text-sm text-gray-900">{{.Name}}</p>
                            </div>
                            <div class="flex-1 ml-3">
                                <p class="mt-1 text-sm text-gray-900">{{(timeFrom .Diagdate).Format "02/01/2006"}}</p>
                            </div>
                        <div class="flex-1 ml-3">
                            <p class="mt-1 text-sm text-gray-900">Ce diagnostique a été retiré</p>
                        </div>
                    </li>
                {{end}}
                {{end}}
            {{end}}
        </ul>
    </div>
</div>
{{end}}