{% extends 'layout/site.html.twig' %}

{% block title %}Waiting for players - {{ session.game.name }}{% endblock %}

{% block body %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h3 class="card-title mb-0">Waiting for more players to join</h3>
            </div>
            <div class="card-body">
                <h4>{{ session.game.name }}</h4>
                <p>Share the invite code with your friends. Feel free to chat below while you wait &mdash; no need to reload the page.</p>

                <div class="alert alert-info">
                    <strong>Players joined:</strong> {{ session.players|length }} / {{ session.game.numberOfPlayers }}
                </div>

                <ul class="list-group mb-3">
                    {% for sessionPlayer in session.players %}
                        <li class="list-group-item">{{ sessionPlayer.user.username }}</li>
                    {% endfor %}
                </ul>

                {% if session.players|length >= session.game.numberOfPlayers %}
                    <form method="post" action="{{ path('game_dashboard') }}" class="mb-3">
                        <input type="hidden" name="session_id" value="{{ session.id }}">
                        <button type="submit" name="start_session" class="btn btn-success">Start Session</button>
                    </form>
                {% endif %}

                <a href="{{ path('game_dashboard') }}" class="btn btn-outline-secondary btn-sm">Back to Dashboard</a>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0">Lobby chat</h5>
            </div>
            <div class="card-body">
                <div id="lobby-chat-log" class="mb-3 d-flex flex-column gap-2" style="max-height: 320px; overflow-y: auto;">
                    {% for message in messages %}
                        <div class="lobby-message">
                            <strong>{{ message.player.user.username }}</strong>
                            <span class="text-muted small">{{ message.createdAt|date('H:i') }}</span>
                            <div>{{ message.content }}</div>
                        </div>
                    {% else %}
                        <p class="text-muted mb-0" id="lobby-chat-empty">No messages yet. Say hi!</p>
                    {% endfor %}
                </div>

                {% if player %}
                    <form method="post" class="d-flex gap-2">
                        <input type="text" name="content" class="form-control" placeholder="Type a message&hellip;" maxlength="500" required autocomplete="off">
                        <button type="submit" name="send_message" class="btn btn-primary">Send</button>
                    </form>
                {% else %}
                    <p class="text-muted mb-0">Only players in this session can chat.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div id="game-lobby-config"
     data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
     data-topic="/game/hub/{{ session.id|e('html_attr') }}"
     style="display:none">
</div>
{% endblock %}