<x-app-layout title="Recordings">
    <div class="flex items-center justify-between">
        <h1 class="text-xl font-semibold text-slate-900">Recordings</h1>
    </div>

    <div class="mt-4 space-y-2">
        @forelse ($recordings as $recording)
            <div class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-4">
                <div>
                    <h3 class="font-medium text-slate-900">{{ $recording->session->room->title }}</h3>
                    <p class="text-sm text-slate-500">
                        {{ config('meet.recording_statuses')[$recording->status] ?? $recording->status }}
                        · {{ $recording->created_at->format('M j, Y g:i A') }}
                    </p>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('meet.recordings.show', $recording) }}" class="text-sm text-indigo-600 hover:underline">View</a>
                    @if ($recording->hasPlayableFile())
                        <a href="{{ route('meet.recordings.download', $recording) }}" class="text-sm text-slate-600 hover:underline">Download</a>
                    @endif
                </div>
            </div>
        @empty
            <p class="rounded-2xl border border-dashed border-slate-200 bg-white p-8 text-center text-sm text-slate-500">No recordings yet.</p>
        @endforelse
    </div>

    <div class="mt-4">{{ $recordings->links() }}</div>
</x-app-layout>
