python-tdd/src/templates/apps/gameboard/_partials/_gatekeeper.html

<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 btn-xl">PICK ROLES</button>
                        </form>
                    {% endif %}
                </div>
            </div>

            {% if request.user == room.owner %}
                <div class="gate-invite-panel">
                    <h3>Invite Friend</h3>
                    <form method="POST" action="{% url 'epic:invite_gamer' room.id %}" style="display:flex; gap:0.5rem; align-items:center;">
                        {% csrf_token %}
                        <input type="email" name="invitee_email" id="id_invite_email" class="form-control form-control-lg" placeholder="friend@example.com" style="flex:1; min-width:0;" hx-preserve>
                        <button type="submit" id="id_invite_btn" class="btn btn-confirm">OK</button>
                    </form>
                </div>
            {% endif %}

        </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>