{% extends 'wfbo/_layout.html.twig' %}

{% block wfbo_title %}Head2Head Karera - Add Race{% endblock %}

{% block wfbo_content %}

    <div class="d-flex align-items-center mb-4">
        <a href="{{ path('app_wfbo_h2h_event_show', {id: event.id}) }}" class="btn btn-sm btn-outline-secondary me-3">&larr; Back</a>
        <div>
            <h2 style="margin-bottom: 4px; color: #000;">Add Race</h2>
            <p style="color: var(--wfbo-text-secondary); margin-bottom: 0;">Event: {{ event.eventDate|date('M d, Y') }}</p>
        </div>
    </div>

    {{ form_start(h2hRaceForm, {attr: {'data-testid': 'h2h-race-form', 'novalidate': 'novalidate', 'data-turbo': 'false'}}) }}

    <div class="card mb-4">
        <div class="card-body">
            <h3 class="wfbo-card-title">Race Details</h3>

            <div class="mb-3" style="max-width: 200px;">
                {{ form_label(h2hRaceForm.raceNo, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(h2hRaceForm.raceNo) }}
                {{ form_errors(h2hRaceForm.raceNo) }}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-body">
                    <h3 class="wfbo-card-title" style="color: #0d6efd;">Horse A</h3>

                    <div class="mb-3" style="max-width: 150px;">
                        {{ form_label(h2hRaceForm.horseANumber, null, {label_attr: {class: 'form-label--sm'}}) }}
                        {{ form_widget(h2hRaceForm.horseANumber) }}
                        {{ form_errors(h2hRaceForm.horseANumber) }}
                    </div>

                    <div class="mb-3">
                        {{ form_label(h2hRaceForm.horseAName, null, {label_attr: {class: 'form-label--sm'}}) }}
                        {{ form_widget(h2hRaceForm.horseAName) }}
                        {{ form_errors(h2hRaceForm.horseAName) }}
                    </div>

                    <div class="mb-0">
                        {{ form_label(h2hRaceForm.horseAJockey, null, {label_attr: {class: 'form-label--sm'}}) }}
                        {{ form_widget(h2hRaceForm.horseAJockey) }}
                        {{ form_errors(h2hRaceForm.horseAJockey) }}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-body">
                    <h3 class="wfbo-card-title" style="color: #dc3545;">Horse B</h3>

                    <div class="mb-3" style="max-width: 150px;">
                        {{ form_label(h2hRaceForm.horseBNumber, null, {label_attr: {class: 'form-label--sm'}}) }}
                        {{ form_widget(h2hRaceForm.horseBNumber) }}
                        {{ form_errors(h2hRaceForm.horseBNumber) }}
                    </div>

                    <div class="mb-3">
                        {{ form_label(h2hRaceForm.horseBName, null, {label_attr: {class: 'form-label--sm'}}) }}
                        {{ form_widget(h2hRaceForm.horseBName) }}
                        {{ form_errors(h2hRaceForm.horseBName) }}
                    </div>

                    <div class="mb-0">
                        {{ form_label(h2hRaceForm.horseBJockey, null, {label_attr: {class: 'form-label--sm'}}) }}
                        {{ form_widget(h2hRaceForm.horseBJockey) }}
                        {{ form_errors(h2hRaceForm.horseBJockey) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        <button type="submit" class="btn btn-admin-save" data-testid="btn-save-h2h-race">
            Add Race
        </button>
    </div>

    {{ form_end(h2hRaceForm) }}

{% endblock %}