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

{% block wfbo_title %}Head2Head Karera - Events{% endblock %}

{% block wfbo_content %}

    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 style="margin-bottom: 4px; color: #000;">Events</h2>
            <p style="color: var(--wfbo-text-secondary); margin-bottom: 0;">Manage race events and schedules.</p>
        </div>
        <a href="{{ path('app_wfbo_h2h_event_new') }}" class="btn btn-admin-save" data-testid="btn-new-h2h-event">
            Create Event
        </a>
    </div>

    {% if events|length > 0 %}
    <div class="card">
        <div class="table-responsive">
            <table class="data-table" style="--bs-table-color: #000000; --bs-table-bg: #ffffff;">
                <thead>
                    <tr>
                        <th scope="col" style="padding: 12px 16px;">#</th>
                        <th scope="col" style="padding: 12px 16px;">Date</th>
                        <th scope="col" style="padding: 12px 16px;">Races</th>
                        <th scope="col" style="padding: 12px 16px;">Video</th>
                        <th scope="col" style="padding: 12px 16px;">Created</th>
                        <th scope="col" style="padding: 12px 16px;"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for event in events %}
                    <tr data-testid="h2h-event-row-{{ event.id }}">
                        <td style="padding: 12px 16px;">{{ event.id }}</td>
                        <td style="padding: 12px 16px;">{{ event.eventDate|date('M d, Y') }}</td>
                        <td style="padding: 12px 16px;">{{ event.races|length }}</td>
                        <td style="padding: 12px 16px;">
                            {% if event.videoUrl %}
                                <span class="badge bg-success">Linked</span>
                            {% else %}
                                <span class="badge bg-secondary">None</span>
                            {% endif %}
                        </td>
                        <td style="padding: 12px 16px;">{{ event.createdAt|date('M d, Y H:i') }}</td>
                        <td class="text-end" style="padding: 12px 16px;">
                            <a href="{{ path('app_wfbo_h2h_event_show', {id: event.id}) }}" class="btn btn-sm btn-outline-primary" data-testid="btn-view-h2h-event-{{ event.id }}">
                                View
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="card">
        <div class="card-body text-center py-5">
            <p class="mb-3" style="color: var(--wfbo-text-secondary);">No events yet.</p>
            <a href="{{ path('app_wfbo_h2h_event_new') }}" class="btn btn-admin-save">
                Create your first event
            </a>
        </div>
    </div>
    {% endif %}

{% endblock %}