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

<x-layouts.app :title="$title" :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>
            <a href="{{ route('clubs.show', $club) }}" class="mt-2 inline-block text-sm text-slate-500 hover:underline">← {{ $club->name }}</a>
        </div>

        @auth
            <div class="rounded-md border border-slate-200 px-4 py-3 text-center text-sm dark:border-slate-800">
                @if ($myRank)
                    {{ __('clubs.your_rank', ['rank' => $myRank]) }}
                @else
                    {{ __('clubs.not_ranked_yet') }}
                @endif
            </div>
        @endauth

        <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">{{ __('leaderboards.player') }}</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 $rowUser = $users->get($row['user_id']); @endphp
                        <tr>
                            <td class="px-4 py-2 text-slate-500">{{ $row['rank'] }}</td>
                            <td class="px-4 py-2">
                                <a href="{{ route('profiles.show', $rowUser->username) }}" class="hover:underline">{{ $rowUser->username }}</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>