{{define "beneficiary_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 sm:px-6">
        <div class="flex items-center space-x-5">
            <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Diagnostics réalisés</h2>
            <a href="{{.ViewState.beneficiary.ID}}/create-diag">
                <button type="button"
                class="flex justify-around 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>
    <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>
                            <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>
                        <a href="/app/diags/{{$diags}}/delete" class="inline-flex"><button type="button"
                            class="w-full ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-red hover:bg-co-red focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Retirer</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">Ce diagnostic a été retiré</p>
                        </div>
                    </li>
                {{end}}
                {{end}}
            {{end}}
        </ul>
    </div>
</div>
{{end}}