<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 %}"
             data-slot="{{ pos.slot.slot_number }}"{% if pos.slot.gamer %} data-user-id="{{ pos.slot.gamer.id }}"{% endif %}>
            <span class="slot-number">{{ pos.slot.slot_number }}</span>
            <span class="slot-gamer">{% if pos.slot.gamer %}{{ pos.slot.gamer.email }}{% else %}empty{% endif %}</span>
            {% 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>
