{% extends 'base.html.twig' %}

{% block body %}
    {% if game %}
        <div class="game-container">
            <div class="game-actions">
                <div class="abandon-wrapper">
                    <button type="button" class="btn btn-abandon" id="abandon-trigger">Abandonner</button>
                    <div class="abandon-popover" id="abandon-popover">
                        <p class="abandon-popover-text">Êtes-vous sûr de vouloir abandonner ?</p>
                        <div class="abandon-popover-actions">
                            <form method="post" action="{{ path('app_game_abandon', {id: game.id}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('game_abandon') }}">
                                <button type="submit" class="btn btn-abandon-confirm">Abandonner</button>
                            </form>
                            <button type="button" class="btn btn-abandon-cancel" id="abandon-cancel">Non, continuer</button>
                        </div>
                    </div>
                </div>
                <script>
                    (function() {
                        var trigger = document.getElementById('abandon-trigger');
                        var popover = document.getElementById('abandon-popover');
                        var cancel = document.getElementById('abandon-cancel');
                        trigger.addEventListener('click', function() {
                            popover.classList.toggle('open');
                        });
                        cancel.addEventListener('click', function() {
                            popover.classList.remove('open');
                        });
                        document.addEventListener('click', function(e) {
                            if (!popover.contains(e.target) && e.target !== trigger) {
                                popover.classList.remove('open');
                            }
                        });
                    })();
                </script>
            </div>

            <div {{ react_component('GameGrid', {
                grid: grid,
                width: width,
                middle: middle,
            }) }}></div>

            <div class="game-footer">
                <a href="https://git.lclr.dev/thibaud-lclr/ltbxd-actorle/issues/new?template=.gitea%2fissue_template%2fbug_report.yaml&title={{ ('Bug — Game #' ~ game.id)|url_encode }}" class="btn-bug-report" target="_blank" rel="noopener">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="8" cy="8" r="7"/>
                        <line x1="8" y1="5" x2="8" y2="9"/>
                        <circle cx="8" cy="11.5" r="0.5" fill="currentColor" stroke="none"/>
                    </svg>
                    Signaler un bug
                </a>
            </div>
        </div>
    {% else %}
        <div class="game-start-container">
            <form method="post" action="{{ path('app_game_start') }}" id="start-form">
                <input type="hidden" name="_token" value="{{ csrf_token('game_start') }}">
                <button type="submit" class="btn btn-primary btn-start">Commencer une partie</button>
            </form>
            <div class="start-loader" id="start-loader"></div>
            {% if not app.user %}
                <p class="start-login-hint">
                    <a href="{{ path('app_login') }}">Connectez-vous</a> pour importer vos propres films
                </p>
            {% endif %}
            <script>
                document.getElementById('start-form').addEventListener('submit', function () {
                    this.style.display = 'none';
                    document.getElementById('start-loader').style.display = 'block';
                });
            </script>
        </div>
    {% endif %}
{% endblock %}