<div wire:poll.10s="refresh">
    <div class="max-w-5xl mx-auto p-6">
        <h1 class="text-2xl font-bold mb-4">Application Management</h1>

        <div class="mb-4">
            <label class="inline-flex items-center">
                <input type="checkbox" wire:model.live="hideApproved" class="mr-2">
                Hide approved applications
            </label>
        </div>

        @if ($error)
            <flux:callout variant="danger" icon="x-circle" class="mb-4">
                <flux:callout.heading>Something went wrong. Most likely your synapse access token is invalid or expired!
                </flux:callout.heading>
            </flux:callout>
        @endif

        <table class="w-full border-collapse border border-gray-300 dark:border-neutral-950 rounded-lg">
            <thead class="bg-gray-100 dark:bg-neutral-900">
                <tr>
                    <th class="px-4 py-2 text-left">UUID</th>
                    <th class="px-4 py-2">Status</th>
                    <th class="px-4 py-2">Uploads</th>
                    <th class="px-4 py-2">Submitted</th>
                    <th class="px-4 py-2">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($applications as $app)
                    <tr>
                        <td class="px-4 py-2 font-mono text-sm">{{ $app->uuid }}</td>
                        <td class="px-4 py-2">
                            @if ($app->status === 0)
                                <span class="text-yellow-600 font-semibold">Pending</span>
                            @elseif ($app->status === 1)
                                <span class="text-green-600 font-semibold">Approved</span>
                            @elseif ($app->status === 2)
                                <span class="text-red-600 font-semibold">Denied</span>
                            @endif
                        </td>
                        <td class="px-4 py-2 text-center">{{ $app->uploads->count() }}</td>
                        <td class="px-4 py-2 text-sm">{{ $app->created_at->diffForHumans() }}</td>
                        <td class="px-4 py-2">
                            <flux:button size="sm" variant="primary"
                                href="{{ route('application', ['uuid' => $app->uuid]) }}">
                                View
                            </flux:button>

                            @if ($app->status === 0)
                                <flux:button class="cursor-pointer" size="sm"
                                    wire:click="approveApplication('{{ (string) $app->uuid }}')">
                                    Approve
                                </flux:button>
                                <flux:button class="cursor-pointer" size="sm" variant="danger"
                                    wire:click="rejectApplication('{{ (string) $app->uuid }}')">
                                    Reject
                                </flux:button>
                            @endif

                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center py-4 text-gray-500">No applications found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <div class="mt-4">
            {{ $applications->links() }}
        </div>
    </div>

</div>