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

{% block title %}Chats — WFBO{% endblock %}

{% block wfbo_title %}Chats{% endblock %}

{% block wfbo_content %}

    <p class="wfbo-card-desc mb-4">
        Read-only log of player chat conversations. CSRs reply via Telegram — this page is for QA and dispute review only.
    </p>

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

            {% if conversations is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">
                    No chat conversations yet.
                </p>
            {% else %}
                <table class="w-100" data-testid="chats-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Player</th>
                            <th class="th-white">Last Message</th>
                            <th class="th-white">Messages</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for conversation in conversations %}
                        <tr class="table-row" data-testid="chat-conversation-row-{{ conversation.id }}">
                            <td class="td-cell td-cell--dark fw-semibold">
                                {{ conversation.player.firstName }} {{ conversation.player.lastName }} (#{{ conversation.player.id }})
                            </td>
                            <td class="td-cell">{{ conversation.lastMessageAt|date('M d, Y H:i') }}</td>
                            <td class="td-cell">{{ conversation.messages|length }}</td>
                            <td class="td-cell">
                                <a href="{{ path('app_wfbo_chat_show', {id: conversation.id}) }}"
                                   class="pill-link--secondary"
                                   data-testid="btn-view-chat-{{ conversation.id }}">
                                    View
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}

        </div>
    </div>

{% endblock %}