{{define "saved_searches"}}
<div class="bg-white shadow sm:rounded-2xl sm:overflow-hidden">
    <h2 class="text-lg font-medium text-gray-900 p-4 sm:px-6">Recherches sauvegardées</h2>
    <div class="border-t border-gray-200">

        {{if .ViewState.saved_searches}}
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-300">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="w-1/6 py-2 px-3 text-left text-sm font-semibold text-gray-900">
                            Bénéficiaire
                        </th>
                        <th scope="col" class="w-1/4 px-3 py-2 text-left text-sm font-semibold text-gray-900">
                            Départ
                        </th>
                        <th scope="col" class="w-1/4 px-3 py-2 text-left text-sm font-semibold text-gray-900">
                            Destination
                        </th>
                        <th scope="col" class="w-1/6 px-3 py-2 text-left text-sm font-semibold text-gray-900">
                            Date/Heure
                        </th>
                        <th scope="col" class="w-1/6 relative py-2 px-3 text-right text-sm font-semibold text-gray-900">
                            <span class="sr-only">Actions</span>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                    {{range .ViewState.saved_searches}}
                    <tr>
                        <td class="py-3 px-3 text-sm text-gray-500">
                            {{if and .Data .Data.passenger_id}}
                                {{$beneficiary := index $.ViewState.beneficiaries .Data.passenger_id}}
                                {{if $beneficiary}}
                                    <a href="/app/beneficiaries/{{.Data.passenger_id}}" class="text-co-blue hover:text-co-blue-dark">
                                        {{$beneficiary.Data.first_name}} {{$beneficiary.Data.last_name}}
                                    </a>
                                {{else}}
                                    -
                                {{end}}
                            {{else}}
                                -
                            {{end}}
                        </td>
                        <td class="px-3 py-3 text-sm text-gray-500 break-words">
                            {{if .Departure}}
                                {{if .Departure.Properties}}
                                    {{if .Departure.Properties.city}}
                                        {{.Departure.Properties.city}}
                                    {{else}}
                                        {{.Departure.Properties.label}}
                                    {{end}}
                                {{else}}
                                    -
                                {{end}}
                            {{else}}
                                -
                            {{end}}
                        </td>
                        <td class="px-3 py-3 text-sm text-gray-500 break-words">
                            {{if .Destination}}
                                {{if .Destination.Properties}}
                                    {{if .Destination.Properties.city}}
                                        {{.Destination.Properties.city}}
                                    {{else}}
                                        {{.Destination.Properties.label}}
                                    {{end}}
                                {{else}}
                                    -
                                {{end}}
                            {{else}}
                                -
                            {{end}}
                        </td>
                        <td class="px-3 py-3 text-sm text-gray-500 whitespace-nowrap">
                            {{if .DateTime}}
                                {{timeFormat .DateTime "02/01/2006 15:04"}}
                            {{else}}
                                -
                            {{end}}
                        </td>
                        <td class="relative py-3 px-3 text-right text-sm font-medium whitespace-nowrap">
                            <a href="{{if eq $.ViewState.search_view "compact"}}/app/journeys/search{{else}}/app/journeys/{{end}}?departure={{json .Departure}}&destination={{json .Destination}}&departuredate={{timeFormat .DateTime "2006-01-02"}}&departuretime={{timeFormat .DateTime "15:04"}}{{if and .Data .Data.passenger_id}}&passengerid={{.Data.passenger_id}}{{end}}" class="text-co-blue hover:text-co-blue-dark mr-4">
                                Rechercher
                            </a>
                            <a href="/app/journeys/saved-searches/{{.ID}}/delete"
                               class="text-red-600 hover:text-red-900"
                               onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette recherche sauvegardée ?')">
                                Supprimer
                            </a>
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
        {{else}}
        <div class="text-center py-8">
            <div class="text-gray-500">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900">Aucune recherche sauvegardée</h3>
                <p class="mt-1 text-sm text-gray-500">Effectuez une recherche et cliquez sur "Enregistrer pour plus tard" pour commencer.</p>
            </div>
        </div>
        {{end}}
    </div>
</div>
{{end}}