{% 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"
                  data-controller="game-config">
                <input type="hidden" name="_token" value="{{ csrf_token('game_start') }}">

                <div class="config-panel">
                    {% if app.user %}
                        <div class="config-section">
                            <label class="config-toggle">
                                <span class="config-toggle-label">Films vus</span>
                                <input type="checkbox" name="watched_only" value="1" class="toggle-switch">
                            </label>
                        </div>
                    {% endif %}

                    <div class="config-section">
                        <div class="config-section-title">Paramètres des indices</div>
                        <div class="config-hint-types">
                            <label class="config-checkbox">
                                <input type="checkbox" name="hint_film" value="1" checked
                                       data-game-config-target="hintType"
                                       data-action="change->game-config#enforceMinOneChecked">
                                Film
                            </label>
                            <label class="config-checkbox">
                                <input type="checkbox" name="hint_character" value="1" checked
                                       data-game-config-target="hintType"
                                       data-action="change->game-config#enforceMinOneChecked">
                                Rôle
                            </label>
                            <label class="config-checkbox">
                                <input type="checkbox" name="hint_award" value="1" checked
                                       data-game-config-target="hintType"
                                       data-action="change->game-config#enforceMinOneChecked">
                                Récompense
                            </label>
                        </div>

                        <div class="config-award-types" data-game-config-target="awardSection">
                            <div class="config-section-subtitle">Récompenses</div>
                            <div class="config-award-list">
                                <label class="config-checkbox">
                                    <input type="checkbox" checked
                                           data-game-config-target="allAwards"
                                           data-action="change->game-config#toggleAllAwards">
                                    Toutes les récompenses
                                </label>
                                {% for awardType in awardTypes %}
                                    <label class="config-checkbox">
                                        <input type="checkbox" name="award_types[]"
                                               value="{{ awardType.id }}" checked
                                               data-game-config-target="awardType"
                                               data-action="change->game-config#syncAllAwards">
                                        {{ awardType.name }}
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

                <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 %}

            {% for message in app.flashes('error') %}
                <div class="flash-error">{{ message }}</div>
            {% endfor %}

            <script>
                document.getElementById('start-form').addEventListener('submit', function () {
                    this.style.display = 'none';
                    document.getElementById('start-loader').style.display = 'block';
                });
            </script>
        </div>
    {% endif %}
{% endblock %}