{% 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">
            <div class="card-header bg-primary text-white">
                <h3 class="card-title mb-0">Waiting for all players to be ready</h3>
            </div>
            <div class="card-body">
                <h4>{{ session.game.name }}</h4>
                <p>Welcome to the game! Please wait for all players to join and signal they are ready to start.</p>

                <div class="game-info">
                    Please keep the following things in mind:
                    <ul>
                        <li>This game is best played in full screen mode. For windows, press F11. For Mac, press Cmd+Ctrl+F.</li>
                        <li>There is no need to reload the page. There is even a chance this could break the game.</li>
                        <li>If your internet connection is lost, you can get back in the game after internet has been fixed.</li>
                    </ul>
                </div>

                <div class="alert alert-info">
                    <strong>Game Information:</strong>
                    <ul class="mb-0">
                        <li>Number of players: {{ session.game.numberOfPlayers }}</li>
                        <li>Current players: {{ session.players|length }} / {{ session.game.numberOfPlayers }}</li>
                    </ul>
                </div>

                <div class="alert alert-secondary">
                    <strong>New here?</strong> Try the <a href="{{ path('game_pregame', {session: session.id}) }}" target="_blank" rel="noopener">command line tutorial</a>.
                    It's a small tutorial that gives you the information you'll need for the game to run.
                    You can go through it as many times as you like &mdash; just make sure you feel at least a little confident
                    with the commands it covers before you start the game.
                </div>

                <div class="mt-4">
                    <h5>Players status:</h5>
                    <ul class="list-group">
                        {% for player in session.players %}
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                {{ player.user.username }}
                                {% set playerReady = false %}
                                {% set settingName = 'ReadyAtForPlayer' ~ player.screen %}
                                {% for setting in session.settings %}
                                    {% if setting.name.value == settingName and setting.player == player %}
                                        {% set playerReady = true %}
                                    {% endif %}
                                {% endfor %}

                                {% if playerReady %}
                                    <span class="badge bg-success">Ready</span>
                                {% else %}
                                    <span class="badge bg-secondary">Not ready</span>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                <hr>

                {% if not app.user.verified %}
                    <div class="alert alert-warning">
                        You must verify your email address before you can mark yourself as ready.
                        Check your inbox for the confirmation link, or <a href="{{ path('app_verify_resend_email') }}">request a new one</a>.
                    </div>
                {% endif %}
                <form method="post" class="mt-4">
                    <input type="hidden" name="_token" value="{{ csrf_token('toggle_ready_' ~ session.id) }}">
                    <input type="hidden" name="toggle_ready" value="0">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="toggle_ready" name="toggle_ready" value="1" onchange="this.form.submit()" {{ isReady ? 'checked' : '' }} {{ not app.user.verified ? 'disabled' : '' }}>
                        <label class="form-check-label" for="toggle_ready">
                            <strong>I am ready to start!</strong>
                        </label>
                    </div>
                    <p class="text-muted small">
                        As soon as everyone has checked this box, the game starts automatically for everyone.
                        {% if isReady %}
                            Your ready status expires in <span id="ready-countdown">1:00</span> if not everyone else is ready by then.
                        {% endif %}
                    </p>
                </form>

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

<form id="expire-ready-form" method="post" style="display:none">
    <input type="hidden" name="_token" value="{{ csrf_token('expire_ready_' ~ session.id) }}">
    <input type="hidden" name="expire_ready" value="1">
</form>

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