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

{% block wfbo_title %}Event Management{% 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 %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <p class="wfbo-card-desc mb-0">
                Race events scheduled at an arena. New events always start as Draft.
            </p>
        </div>
        <a href="{{ path('app_wfbo_event_new') }}"
           class="pill-link--primary"
           data-testid="btn-new-event">
            + Add New
        </a>
    </div>

    <div class="table-card">
        <div class="card-body p-0">

            {% if events is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">
                    No events added yet.
                </p>
            {% else %}
                <table class="w-100 stack-table" data-testid="events-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Arena</th>
                            <th class="th-white">Event Date</th>
                            <th class="th-white">Video</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for event in events %}
                        <tr class="table-row" data-testid="event-row-{{ event.id }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Arena">{{ event.management.name }}</td>
                            <td class="td-cell" data-label="Event Date">{{ event.eventDate|date('Y-m-d') }}</td>
                            <td class="td-cell" data-label="Video">
                                {% if event.videoUrl %}
                                    <a href="{{ event.videoUrl }}" target="_blank" rel="noopener">Link</a>
                                {% else %}
                                    —
                                {% endif %}
                            </td>
                            <td class="td-cell" data-label="Status">
                                {% if event.status == constant('App\\Entity\\Event::STATUS_PUBLISHED') %}
                                    <span class="badge-role badge-role--active" data-testid="badge-status-{{ event.id }}">Published</span>
                                {% else %}
                                    <span class="badge-role badge-role--suspended" data-testid="badge-status-{{ event.id }}">Draft</span>
                                {% endif %}
                            </td>
                            <td class="td-cell" data-label="Actions">
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_event_show', {id: event.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-view-{{ event.id }}">
                                        View
                                    </a>
                                    <a href="{{ path('app_wfbo_event_edit', {id: event.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-edit-{{ event.id }}">
                                        Edit
                                    </a>
                                    <form method="POST"
                                          action="{{ path('app_wfbo_event_delete', {id: event.id}) }}"
                                          onsubmit="return confirm('Delete this event?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_delete_' ~ event.id) }}">
                                        <button type="submit"
                                                class="btn-reject"
                                                data-testid="btn-delete-{{ event.id }}">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>

                {% if totalPages > 1 %}
                <div class="d-flex align-items-center justify-content-between mt-4" data-testid="events-pagination">
                    <p class="pagination-info">
                        Page {{ currentPage }} of {{ totalPages }}
                    </p>
                    <div class="d-flex gap-2">
                        {% if currentPage > 1 %}
                            <a href="{{ path('app_wfbo_events', {page: currentPage - 1}) }}"
                               class="btn btn-page-prev"
                               data-testid="btn-prev-page">
                                ← Previous
                            </a>
                        {% endif %}
                        {% if currentPage < totalPages %}
                            <a href="{{ path('app_wfbo_events', {page: currentPage + 1}) }}"
                               class="btn btn-page-next"
                               data-testid="btn-next-page">
                                Next →
                            </a>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            {% endif %}

        </div>
    </div>

{% endblock %}