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

{% block wfbo_title %}Announcements{% 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 flex-wrap gap-2 mb-4">
        <p class="wfbo-card-desc mb-0">
            Text bars shown to players under the navbar on every page. Only one enabled
            announcement per audience &mdash; disable the current one before publishing a new one.
        </p>
        <a href="{{ path('app_wfbo_announcement_new') }}"
           class="pill-link--primary"
           data-testid="btn-new-announcement">
            + New Announcement
        </a>
    </div>

    <div class="table-card">
        <div class="card-body p-0" style="overflow-x: auto;">

            {% if announcements is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">
                    No announcements yet.
                </p>
            {% else %}
                <table class="w-100" data-testid="announcements-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">#</th>
                            <th class="th-white">Message</th>
                            <th class="th-white">Shown to</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Updated</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for announcement in announcements %}
                        <tr class="table-row" data-testid="announcement-row-{{ announcement.id }}">
                            <td class="td-cell">{{ announcement.id }}</td>
                            <td class="td-cell td-cell--dark" style="max-width: 420px;">
                                <div class="announcement-bar announcement-bar--{{ announcement.audience }}" style="border-radius: 6px;">
                                    <div class="announcement-bar__text">{{ announcement.message|announcement_links }}</div>
                                </div>
                            </td>
                            <td class="td-cell" data-testid="announcement-audience-{{ announcement.id }}">
                                {% if announcement.forAllPlayers %}
                                    <span class="badge-role badge-role--default">All players</span>
                                {% else %}
                                    <div class="d-flex flex-wrap gap-1">
                                        {% for agent in announcement.targetAgents %}
                                            <span class="badge-role badge-role--agent">{{ agent.firstName }} {{ agent.lastName }}</span>
                                        {% endfor %}
                                    </div>
                                    <div class="form-hint mt-1">Direct players only</div>
                                {% endif %}
                            </td>
                            <td class="td-cell">
                                {% if announcement.enabled %}
                                    <span class="badge-role badge-role--active" data-testid="badge-status-{{ announcement.id }}">Enabled</span>
                                {% else %}
                                    <span class="badge-role badge-role--suspended" data-testid="badge-status-{{ announcement.id }}">Disabled</span>
                                {% endif %}
                            </td>
                            <td class="td-cell text-nowrap">{{ announcement.updatedAt|date('M d, Y g:i A') }}</td>
                            <td class="td-cell">
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_announcement_edit', {id: announcement.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-edit-{{ announcement.id }}">
                                        Edit
                                    </a>
                                    <form method="POST"
                                          action="{{ path('app_wfbo_announcement_action', {id: announcement.id, action: announcement.enabled ? 'disable' : 'enable'}) }}"
                                          class="m-0"
                                          {% if announcement.enabled %}onsubmit="return confirm('Disable this announcement? Players will stop seeing it.');"{% endif %}>
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_announcement_action_' ~ announcement.id) }}">
                                        <button type="submit"
                                                class="{{ announcement.enabled ? 'btn-disable' : 'btn-approve' }}"
                                                data-testid="btn-toggle-{{ announcement.id }}">
                                            {{ announcement.enabled ? 'Disable' : 'Enable' }}
                                        </button>
                                    </form>
                                    <form method="POST"
                                          action="{{ path('app_wfbo_announcement_delete', {id: announcement.id}) }}"
                                          onsubmit="return confirm('Delete this announcement?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_announcement_delete_' ~ announcement.id) }}">
                                        <button type="submit"
                                                class="btn-reject"
                                                data-testid="btn-delete-{{ announcement.id }}">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}

        </div>
    </div>

{% endblock %}