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

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

{% block wfbo_title %}Chat with {{ conversation.player.firstName }} {{ conversation.player.lastName }}{% endblock %}

{% block wfbo_content %}

    <a href="{{ path('app_wfbo_chats') }}" class="pill-link--secondary mb-4 d-inline-block" data-testid="btn-back-to-chats">
        &larr; Back to Chats
    </a>

    <div class="table-card">
        <div class="card-body p-4" data-testid="chat-message-list">
            {% if messages is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state">
                    No messages in this conversation yet.
                </p>
            {% else %}
                {% for message in messages %}
                    <div class="mb-3" data-testid="chat-message-{{ message.id }}">
                        <div class="fw-semibold">
                            {% if message.senderType.value == 'player' %}
                                {{ conversation.player.firstName }} {{ conversation.player.lastName }}
                            {% else %}
                                CSR{% if message.csrTelegramUsername %} (@{{ message.csrTelegramUsername }}){% endif %}
                            {% endif %}
                            <span class="text-muted fw-normal">— {{ message.createdAt|date('M d, Y H:i') }}</span>
                        </div>
                        <div>{{ message.body }}</div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>

{% endblock %}