@extends('layouts.app')
@section('title', __('messages.jockeys_title'))

@section('content')
<div class="mx-auto max-w-6xl px-4 py-10">
    <h1 class="mb-6 font-display text-3xl font-bold">{{ __('messages.jockeys_title') }}</h1>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @forelse ($jockeys as $jockey)
            <a href="{{ $jockey->publicUrl() }}" class="card p-4 hover:border-gold hover:shadow-md">
                <div class="h-16 w-16 overflow-hidden rounded-full bg-forest/10">
                    @if ($jockey->photo_path)
                        <img src="{{ Illuminate\Support\Facades\Storage::disk('public')->url($jockey->photo_path) }}" alt="{{ $jockey->user->fullName() }}" class="h-full w-full object-cover">
                    @endif
                </div>
                <h2 class="mt-3 font-display font-semibold">{{ $jockey->user->fullName() }} @if ($jockey->is_vip)<span class="ml-1 rounded-full bg-gold px-2 py-0.5 text-xs font-bold text-ink">⭐ VIP</span>@endif</h2>
                <p class="text-sm text-ink/60">{{ $jockey->club?->name }}</p>
                <div class="mt-3 flex items-center justify-between text-sm">
                    <span class="font-mono text-ink/50">{{ $jockey->wins_count }}/{{ $jockey->races_count }} 🥇</span>
                    <span class="font-semibold text-forest">{{ $jockey->points }} {{ __('messages.points_short') }}</span>
                </div>
            </a>
        @empty
            <p class="text-ink/50">—</p>
        @endforelse
    </div>

    <div class="mt-8">{{ $jockeys->links() }}</div>
</div>
@endsection