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

{% block wfbo_title %}Head2Head Karera - Create Event{% endblock %}

{% block wfbo_content %}

    <div class="d-flex align-items-center mb-4">
        <a href="{{ path('app_wfbo_h2h_events') }}" class="btn btn-sm btn-outline-secondary me-3">&larr; Back</a>
        <div>
            <h2 style="margin-bottom: 4px; color: #000;">Create Event</h2>
            <p style="color: var(--wfbo-text-secondary); margin-bottom: 0;">Set up a new race event.</p>
        </div>
    </div>

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

    <div class="card mb-4">
        <div class="card-body">
            <div class="mb-3" style="max-width: 320px;">
                {{ form_label(h2hEventForm.eventDate, null, {label_attr: {class: 'form-label--sm'}}) }}
                {{ form_widget(h2hEventForm.eventDate, {attr: {style: 'background-color: #ffffff; color: #000000;'}}) }}
                {{ form_errors(h2hEventForm.eventDate) }}
            </div>

            <div class="mb-0" style="max-width: 420px;">
                {{ form_widget(h2hEventForm.videoUrl) }}
                {{ form_help(h2hEventForm.videoUrl) }}
                {{ form_errors(h2hEventForm.videoUrl) }}
                <p class="form-hint">Optional. You can add the video link later.</p>
            </div>
        </div>
    </div>

    <div>
        <button type="submit" class="btn btn-admin-save" data-testid="btn-save-h2h-event">
            Create Event
        </button>
    </div>

    {{ form_end(h2hEventForm) }}

{% endblock %}