@extends('layouts.dashboard')
@section('title', __('messages.race_participants'))

@section('dashboard_content')
<h1 class="mb-6 font-display text-2xl font-bold">{{ $race->name }} — {{ __('messages.race_participants') }}</h1>

<form action="{{ route('dashboard.organizer.participants.store', ['locale' => app()->getLocale(), 'race' => $race]) }}" method="POST" class="mb-8 flex flex-wrap items-end gap-3 rounded-lg border border-ink/10 bg-white p-4">
    @csrf
    <div>
        <label class="mb-1 block text-xs text-ink/60">Horse ID</label>
        <input type="number" name="horse_id" required class="w-28 rounded-md border border-ink/15 px-3 py-2 text-sm">
    </div>
    <div>
        <label class="mb-1 block text-xs text-ink/60">Jockey Profile ID</label>
        <input type="number" name="jockey_profile_id" required class="w-32 rounded-md border border-ink/15 px-3 py-2 text-sm">
    </div>
    <div>
        <label class="mb-1 block text-xs text-ink/60">#</label>
        <input type="number" name="number" required class="w-20 rounded-md border border-ink/15 px-3 py-2 text-sm">
    </div>
    <button type="submit" class="btn-primary">{{ __('messages.action_add') }}</button>
</form>

<div class="space-y-2">
    @forelse ($participants as $p)
        <div class="card flex items-center justify-between p-3 text-sm">
            <span class="font-mono">#{{ $p->number }}</span>
            <span class="flex-1 px-3">{{ $p->horse->name }} — {{ $p->jockey->user->fullName() }}</span>
            <form action="{{ route('dashboard.organizer.participants.destroy', ['locale' => app()->getLocale(), 'race' => $race, 'participant' => $p]) }}" method="POST" data-confirm="წაშლა?">
                @csrf @method('DELETE')
                <button class="text-red-600 hover:underline">{{ __('messages.action_delete') }}</button>
            </form>
        </div>
    @empty
        <p class="text-ink/40">—</p>
    @endforelse
</div>
@endsection