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

{% block body %}
    {% if game %}
        <div class="game-container">
            <div class="game-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">Abandonner</button>
                </form>
            </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>
            <script>
                document.getElementById('start-form').addEventListener('submit', function () {
                    this.style.display = 'none';
                    document.getElementById('start-loader').style.display = 'block';
                });
            </script>
        </div>
    {% endif %}
{% endblock %}