@php
    $title = __('clubs.rankings_title', ['category' => $category->name()]);
    $description = __('clubs.rankings_meta_description', ['category' => $category->name()]);
@endphp

<x-layouts.app :title="$title" :description="$description" :canonical="url()->current()">
    <div class="mx-auto max-w-2xl space-y-6">
        <div class="text-center">
            <h1 class="text-2xl font-semibold">{{ $title }}</h1>
        </div>

        <div class="overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800">
            <table class="w-full text-left text-sm">
                <thead class="bg-slate-50 text-slate-500 dark:bg-slate-900">
                    <tr>
                        <th class="px-4 py-2 font-medium">{{ __('clubs.rank') }}</th>
                        <th class="px-4 py-2 font-medium">{{ __('clubs.club') }}</th>
                        <th class="px-4 py-2 font-medium">{{ __('clubs.score') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    @forelse ($rows as $row)
                        @php $rowClub = $clubs->get($row['club_id']); @endphp
                        <tr>
                            <td class="px-4 py-2 text-slate-500">{{ $row['rank'] }}</td>
                            <td class="px-4 py-2">
                                <a href="{{ route('clubs.show', $rowClub) }}" class="hover:underline">{{ $rowClub->name }}</a>
                            </td>
                            <td class="px-4 py-2 font-semibold">{{ $row['score'] }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="px-4 py-6 text-center text-slate-500">{{ __('clubs.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{ $rows->links('pagination::tailwind') }}
    </div>
</x-layouts.app>