@extends('layouts.app')
@section('title', __('messages.horses_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.horses_title') }}</h1>

    <form method="GET" class="mb-8 flex flex-wrap gap-3">
        <input type="text" name="breed" value="{{ request('breed') }}" placeholder="{{ __('messages.horse_breed') }}"
               class="rounded-md border border-ink/15 px-3 py-2 text-sm">
        <select name="sex" class="rounded-md border border-ink/15 px-3 py-2 text-sm">
            <option value="">{{ __('messages.horse_sex') }}</option>
            @foreach (['male','female','gelding'] as $sex)
                <option value="{{ $sex }}" @selected(request('sex') === $sex)>{{ __('messages.sex_'.$sex) }}</option>
            @endforeach
        </select>
        <button type="submit" class="btn-outline !border-ink/20 !text-ink hover:!border-forest hover:!text-forest">{{ __('messages.action_view') }}</button>
    </form>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @forelse ($horses as $horse)
            <a href="{{ $horse->publicUrl() }}" class="card p-4 hover:border-gold hover:shadow-md">
                <div class="flex items-center justify-between">
                    <p class="font-mono text-xs text-ink/40">{{ $horse->unique_code }}</p>
                    @if ($horse->is_vip)
                        <span class="rounded-full bg-gold px-2 py-0.5 text-xs font-bold text-ink">⭐ VIP</span>
                    @endif
                </div>
                <h2 class="mt-1 font-display font-semibold">{{ $horse->name }}</h2>
                <p class="mt-1 text-sm text-ink/60">{{ $horse->breed }}</p>
                <div class="mt-3 flex items-center justify-between text-sm">
                    <span class="font-mono text-ink/50">{{ $horse->wins_count }}/{{ $horse->races_count }} 🥇</span>
                    <span class="font-semibold text-forest">{{ $horse->points }} {{ __('messages.points_short') }}</span>
                </div>
            </a>
        @empty
            <p class="text-ink/50">—</p>
        @endforelse
    </div>

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