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

{% block wfbo_title %}{{ event ? 'Edit' : 'New' }} Event{% endblock %}

{% block wfbo_content %}

    {% set errorFlashes = app.flashes('error') %}
    {% if errorFlashes %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">
            {% for flash in errorFlashes %}
                <div>{{ flash }}</div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="mb-4">
        <a href="{{ path('app_wfbo_karera_events') }}"
           class="back-link">
            ← Back to Events
        </a>
    </div>

    <div class="card" style="max-width: 560px;">
        <div class="card-body">

            <h2 class="wfbo-card-title mb-3">
                {{ event ? 'Edit' : 'New' }} Event
            </h2>

            <form method="POST"
                  action="{{ event ? path('app_wfbo_karera_event_edit', {id: event.id}) : path('app_wfbo_karera_event_new') }}"
                  data-testid="event-form"
                  data-turbo="false"
                  novalidate>
                <input type="hidden" name="_token"
                       value="{{ csrf_token(event ? 'wfbo_karera_event_edit_' ~ event.id : 'wfbo_karera_event_new') }}">

                <div class="mb-3">
                    <label class="form-label--sm">
                        Date <span class="text-danger">*</span>
                    </label>
                    <input type="date"
                           name="event_date"
                           class="form-control"
                           style="max-width: 220px;"
                           value="{{ submitted.eventDate }}"
                           data-testid="input-event-date">
                </div>

                <div class="mb-3">
                    <label class="form-label--sm">
                        Arena <span class="text-danger">*</span>
                    </label>
                    <select name="arena_id"
                            class="form-select"
                            style="max-width: 320px;"
                            data-testid="select-arena">
                        <option value="">— Select Arena —</option>
                        {% for arena in arenas %}
                            <option value="{{ arena.id }}" {{ submitted.arenaId == arena.id ? 'selected' : '' }}>{{ arena.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-4">
                    <label class="form-label--sm">
                        Number of Races <span class="text-danger">*</span>
                    </label>
                    <input type="number"
                           name="number_of_races"
                           class="form-control"
                           style="max-width: 160px;"
                           min="1"
                           value="{{ submitted.numberOfRaces }}"
                           data-testid="input-number-of-races">
                    {% if event %}
                        <p class="form-hint">Increasing this adds more races. It cannot be reduced below the number of races already created.</p>
                    {% endif %}
                </div>

                <div class="d-flex align-items-center gap-3">
                    <button type="submit"
                            class="btn btn-admin-save"
                            data-testid="btn-submit">
                        {{ event ? 'Update' : 'Save' }} Event
                    </button>
                    <a href="{{ path('app_wfbo_karera_events') }}"
                       class="back-link">
                        Cancel
                    </a>
                </div>

            </form>

        </div>
    </div>

{% endblock %}