{% load lyric_extras %}
{# Gate-position circles (1–6). Each carries a `.tt-pos-*` state class +     #}
{# `data-tt-*` payload (sprint 2026-06-02) that position-tooltip.js reads on  #}
{# hover to fill #id_position_tooltip_portal — @handle / title / seat-sig /   #}
{# bud shoptalk / #tokens / seat-clock expiry. NB: the `.tt-pos-*` class is   #}
{# appended AFTER `role-assigned` so the `gate-slot filled role-assigned`     #}
{# substring (RoleSelectRenderingTest) stays intact, and `class` stays first  #}
{# (before data-slot) for the class-attr regex IT.                            #}
<div class="position-strip">
    {% for pos in gate_positions %}
        <div class="gate-slot{% if pos.slot.status == 'EMPTY' %} empty{% elif pos.slot.status == 'FILLED' %} filled{% elif pos.slot.status == 'RESERVED' %} reserved{% endif %}{% if pos.role_assigned %} role-assigned{% endif %}{% if pos.state_class %} {{ pos.state_class }}{% endif %}"
             data-slot="{{ pos.slot.slot_number }}"{% if pos.slot.gamer %} data-user-id="{{ pos.slot.gamer.id }}" data-tt-title="{{ pos.slot.gamer|at_handle }}" data-tt-description="the {{ pos.slot.gamer.active_title_display }}" data-tt-shoptalk="{{ pos.shoptalk }}" data-tt-tokens="{{ pos.tokens }}" data-tt-token-types="{{ pos.token_types|join:'|' }}"{% if pos.expiry %} data-tt-expiry="expires {{ pos.expiry|relative_ts }}"{% endif %}{% if pos.sign_rank %} data-tt-sign-rank="{{ pos.sign_rank }}" data-tt-sign-suit="{{ pos.sign_suit_icon }}"{% endif %}{% endif %}>
            <span class="slot-number">{{ pos.slot.slot_number }}</span>
            <span class="slot-gamer">{% if pos.slot.gamer %}{{ pos.slot.gamer|at_handle }}{% else %}empty{% endif %}</span>
            {% if pos.is_me_also %}
                {# CARTE: the viewer's own seat they aren't currently acting #}
                {# as — a switch href loads that seat's view (?seat=N).       #}
                <a class="pos-seat-switch" href="{% url 'epic:room' room.id %}?seat={{ pos.slot.slot_number }}" aria-label="Switch to seat {{ pos.slot.slot_number }}"></a>
            {% endif %}
            {% if pos.slot.status == 'RESERVED' and pos.slot.gamer == request.user %}
                <form method="POST" action="{% url 'epic:confirm_token' room.id %}">
                    {% csrf_token %}
                    {% if is_last_slot %}
                        <button type="submit" class="btn btn-primary">PICK ROLES</button>
                    {% else %}
                        <button type="submit" class="btn btn-confirm">OK</button>
                    {% endif %}
                </form>
            {% elif carte_active and pos.slot.status == 'EMPTY' and pos.slot.slot_number == carte_next_slot_number %}
                <form method="POST" action="{% url 'epic:confirm_token' room.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="slot_number" value="{{ pos.slot.slot_number }}">
                    <button type="submit" class="drop-token-btn btn btn-confirm" aria-label="Fill slot {{ pos.slot.slot_number }}">OK</button>
                </form>
            {% elif carte_active and pos.slot.status == 'FILLED' and pos.slot.slot_number == carte_nvm_slot_number %}
                <form method="POST" action="{% url 'epic:release_slot' room.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="slot_number" value="{{ pos.slot.slot_number }}">
                    <button type="submit" class="slot-release-btn btn btn-cancel">NVM</button>
                </form>
            {% endif %}
        </div>
    {% endfor %}
</div>