<div
    id="id_gate_wrapper"
    data-gate-status-url="{% url 'epic:gate_status' room.id %}"
>
    <div class="gate-backdrop"></div>
    <div class="gate-overlay">
        <div class="gate-modal" role="dialog" aria-label="Gatekeeper">

            <div class="gate-title-panel">
                <header class="gate-header">
                    <h1>{{ room.name }}</h1>
                    <div class="gate-status-wrap">
                        <span class="gate-status-text">{{ room.get_gate_status_display }}</span>
                        <span class="status-dots" aria-hidden="true">
                            <span></span><span></span><span></span><span></span>
                        </span>
                    </div>
                </header>
            </div>

            <div class="gate-top-row">
                <div class="gate-main-panel">
                    <div class="token-slot{% if can_drop %} active{% elif user_reserved_slot %} pending{% elif user_filled_slot or carte_active %} claimed{% elif token_depleted %} depleted{% else %} locked{% endif %}">
                        {% if can_drop %}
                            <form method="POST" action="{% url 'epic:drop_token' room.id %}" style="display:contents">
                                {% csrf_token %}
                                <button type="submit" class="token-rails" aria-label="Insert token to play">
                                    <span class="rail"></span>
                                    <span class="rail"></span>
                                </button>
                            </form>
                        {% else %}
                            <div class="token-rails">
                                <span class="rail"></span>
                                <span class="rail"></span>
                            </div>
                        {% endif %}
                        <div class="token-panel">
                            <div class="token-denomination">1</div>
                            <span class="token-insert-label">INSERT TOKEN TO PLAY</span>
                            <span class="token-return-label">PUSH TO RETURN</span>
                        </div>
                        {% if user_can_reject %}
                            <form method="POST" action="{% url 'epic:return_token' room.id %}" style="display:contents">
                                {% csrf_token %}
                                <button type="submit" class="token-return-btn" aria-label="Push to return"></button>
                            </form>
                        {% endif %}
                    </div>
                </div>

                <div class="gate-roles-panel">
                    {% if room.gate_status == 'OPEN' %}
                        <form method="POST" action="{% url 'epic:pick_roles' room.id %}" style="display:contents">
                            {% csrf_token %}
                            <button type="submit" class="launch-game-btn btn btn-primary">PICK ROLES</button>
                        </form>
                    {% endif %}
                </div>
            </div>

            {# Legacy gate-invite-panel retired in favour of #id_bud_btn at  #}
            {# the upper-right of the footer (room.html includes the bud    #}
            {# invite panel partial when the viewer owns the room).         #}

        </div>
    </div>
</div>
<script>
    (function () {
        clearInterval(window._gateDots);
        var wrap = document.querySelector('.status-dots');
        if (!wrap) return;
        var dots = wrap.querySelectorAll('span');
        var n = 0;
        window._gateDots = setInterval(function () {
            if (!document.contains(wrap)) { clearInterval(window._gateDots); return; }
            dots.forEach(function (d, i) { d.textContent = i < n ? '.' : ''; });
            n = (n + 1) % 5;
        }, 400);
    }());
</script>
