{{-- resources/views/panel/applications_trash.blade.php (ejemplo) --}}
<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight">
                    Applications (Trash)
                </h2>
                <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Deleted apps stay here for 24 hours. You can restore them before they are purged.
                </div>
            </div>

            <a href="{{ route('applications') }}"
               class="inline-flex items-center justify-center px-3 py-2 rounded-md text-sm font-semibold
                      border border-gray-200 text-gray-800 hover:bg-gray-50 transition
                      dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800">
                Back to Applications
            </a>
        </div>
    </x-slot>

    <div class="py-8">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">

            {{-- Errors --}}
            @if ($errors->any())
                <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-sm sm:rounded-lg p-6 border border-gray-100 dark:border-gray-800">
                    <div class="text-red-800 dark:text-red-200 bg-red-50 dark:bg-red-900/20 p-3 rounded border border-red-200 dark:border-red-800">
                        {{ $errors->first() }}
                    </div>
                </div>
            @endif

            {{-- Card --}}
            <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-sm sm:rounded-lg border border-gray-100 dark:border-gray-800">
                <div class="p-6 border-b border-gray-100 dark:border-gray-800">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">Trash</div>
                            <div class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">
                                Deleted applications
                            </div>
                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                                Restore an app to make it active again. After purge time, it will be permanently removed.
                            </div>
                        </div>

                        <div class="text-xs text-gray-500 dark:text-gray-400">
                            Total: <span class="font-semibold text-gray-900 dark:text-gray-100">{{ $apps->count() }}</span>
                        </div>
                    </div>
                </div>

                <div class="p-6">
                    @if($apps->isEmpty())
                        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950 p-6 text-center">
                            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                Trash is empty
                            </div>
                            <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                                No deleted applications right now.
                            </div>

                            <div class="mt-4">
                                <a href="{{ route('applications') }}"
                                   class="inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-semibold
                                          bg-indigo-600 text-white hover:bg-indigo-500 transition">
                                    Go to Applications
                                </a>
                            </div>
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-sm">
                                <thead class="text-xs uppercase text-gray-500 dark:text-gray-400">
                                    <tr class="text-left border-b border-gray-200 dark:border-gray-800">
                                        <th class="py-3 pr-4 font-semibold">Name</th>
                                        <th class="py-3 pr-4 font-semibold">Deleted at</th>
                                        <th class="py-3 pr-4 font-semibold">Purge at</th>
                                        <th class="py-3 text-right font-semibold">Actions</th>
                                    </tr>
                                </thead>

                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800 text-gray-900 dark:text-gray-100">
                                    @foreach($apps as $app)
                                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition">
                                            <td class="py-3 pr-4">
                                                <div class="font-semibold">{{ $app->name }}</div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                                    ID: <span class="font-mono">{{ $app->id }}</span>
                                                </div>
                                            </td>

                                            <td class="py-3 pr-4 text-gray-700 dark:text-gray-300">
                                                {{ optional($app->deleted_at)->format('Y-m-d H:i') ?? '-' }}
                                            </td>

                                            <td class="py-3 pr-4">
                                                @if($app->purge_at)
                                                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold
                                                                 bg-yellow-50 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-100
                                                                 ring-1 ring-inset ring-yellow-200 dark:ring-yellow-700/50">
                                                        {{ optional($app->purge_at)->format('Y-m-d H:i') }}
                                                    </span>
                                                @else
                                                    <span class="text-gray-500 dark:text-gray-400">-</span>
                                                @endif
                                            </td>

                                            <td class="py-3">
                                                <div class="flex justify-end">
                                                    <form method="POST" action="{{ route('applications.restore', $app->id) }}">
                                                        @csrf
                                                        <button
                                                            class="inline-flex items-center justify-center px-3 py-2 rounded-md text-xs font-semibold
                                                                   bg-green-600 text-white hover:bg-green-500 transition">
                                                            Restore
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-4 text-xs text-gray-500 dark:text-gray-400">
                            Tip: Restoring an app will reactivate its key and API access immediately.
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>
</x-app-layout>