@php
    $tz = config('app.display_timezone');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Recently Deleted')" />

        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Deleted records') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('After :days days a record leaves this list. The recovery period is set on CRM Settings.', ['days' => $recoveryDays]) }}</p>
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="relative max-w-xs flex-1">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input type="text" wire:model.live.debounce.300ms="q" placeholder="{{ __('Search by name…') }}"
                            class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>
                    <select wire:model.live="type" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Every kind') }}</option>
                        @foreach ($kinds as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Record') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Kind') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Deleted by') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Deleted') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Restorable until') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($rows as $record)
                            @php
                                $key = $record->getMorphClass().':'.$record->getKey();
                                $kind = $directory->keyFor($record);
                            @endphp
                            <tr wire:key="deleted-{{ $kind }}-{{ $record->getKey() }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">
                                    {{ $directory->name($record) }}
                                    @if ($blocked[$key] ?? null)
                                        <span class="mt-0.5 block text-xs font-normal text-amber-600">{{ $blocked[$key] }}</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge color="slate">{{ $directory->singular((string) $kind) }}</x-badge>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $deletedBy[$key] ?? __('Not recorded') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $record->deleted_at?->copy()->timezone($tz)->format('j M Y, H:i') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $record->deleted_at?->copy()->addDays($recoveryDays)->timezone($tz)->format('j M Y') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    @if (($canRestore[$key] ?? false) && ! ($blocked[$key] ?? null))
                                        <button type="button" wire:click="restore('{{ $kind }}', {{ $record->getKey() }})" wire:loading.attr="disabled" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Restore') }}</button>
                                    @elseif (! ($canRestore[$key] ?? false))
                                        <span class="text-xs text-slate-400">{{ __('Not yours to restore') }}</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    @if ($hasFilters)
                                        <x-empty-state icon="magnifying-glass" :title="__('Nothing matches')" :message="__('Try another name, or every kind.')" class="border-0 bg-transparent py-0" />
                                    @else
                                        <x-empty-state icon="archive-box-x-mark" :title="__('Nothing deleted recently')" :message="__('Anything deleted from the CRM in the last :days days appears here and can be restored.', ['days' => $recoveryDays])" class="border-0 bg-transparent py-0" />
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($rows->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $rows->links() }}
                </div>
            @endif
        </x-card>
    </div>
</div>