<link rel="stylesheet" href="{{ asset('css/custom.css') }}">

<x-app-layout>
    <div class="container mx-auto my-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-semibold">
                ACalendar: {{ $start->toFormattedDateString() }} – {{ $end->toFormattedDateString() }}
            </h2>
            <div class="space-x-2">
                <a href="{{ route($viewer.'.calendar', ['week' => $weekOffset - 1]) }}"
                   class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">← Previous</a>
                <a href="{{ route($viewer.'.calendar') }}"
                   class="px-3 py-1 bg-blue-200 rounded hover:bg-blue-300">This Week</a>
                <a href="{{ route($viewer.'.calendar', ['week' => $weekOffset + 1]) }}"
                   class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">Next →</a>
            </div>
        </div>

        <div class="mb-3 text-sm">
            <span class="inline-block px-2 py-1 rounded bg-green-100 border">Free</span>
            <span class="inline-block px-2 py-1 rounded bg-red-200 border ml-2">Booked</span>
            <span class="inline-block px-2 py-1 rounded bg-yellow-200 border ml-2">Blocked</span>
            <span class="inline-block px-2 py-1 rounded bg-gray-100 border ml-2">Closed / Not seeded</span>
        </div>

        <table class="w-full border-collapse border border-gray-300">
            <thead>
                <tr class="bg-gray-100">
                    <th class="border p-2">Time</th>
                    @foreach ($grid['headers'] as $head)
                        <th class="border p-2">{{ $head['label'] }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach ($grid['rows'] as $row)
                    <tr>
                        <td class="border p-2 font-medium">{{ $row['label'] }}</td>
                        @foreach ($row['cells'] as $cell)
                            <td class="border p-2 text-center {{ $cell['class'] }}">
                                @switch($cell['status'])
                                    @case('free')
                                        Free
                                        @break

                                    @case('booked')
                                        Booked
                                        @if ($canSeeNames && !empty($cell['name']))
                                            <br><span class="text-xs">{{ $cell['name'] }}</span>
                                        @endif
                                        @break

                                    @case('blocked')
                                        Blocked
                                        @break

                                    @case('not_seeded')
                                        Not seeded
                                        @break

                                    @default
                                        Closed
                                @endswitch
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</x-app-layout>