{% extends "core/base.html" %}
{% load static %}

{% block title_text %}Gameboard{% endblock title_text %}
{% block header_text %}<span>Game</span>room{% endblock header_text %}

{% block content %}
    <div class="room-page" data-room-id="{{ room.id }}"
         {% if room.table_status %}data-select-role-url="{% url 'epic:select_role' room.id %}"{% endif %}>
        <div id="id_aperture_fill"></div>
        <div class="room-shell">
            <div id="id_game_table" class="room-table">
                {% if room.table_status == "ROLE_SELECT" %}
                <div id="id_pick_sigs_wrap"{% if starter_roles|length < 6 %} style="display:none"{% endif %}>
                    <form method="POST" action="{% url 'epic:pick_sigs' room.id %}">
                        {% csrf_token %}
                        <button id="id_pick_sigs_btn" type="submit" class="btn btn-primary">PICK<br>SIGS</button>
                    </form>
                </div>
                {% endif %}
                <div class="room-table-scene">
                    <div class="table-hex-border">
                        <div class="table-hex">
                            <div class="table-center">
                                {% if room.table_status == "ROLE_SELECT" %}
                                    {% if card_stack_state %}
                                        <div class="card-stack" data-state="{{ card_stack_state }}"
                                            data-starter-roles="{{ starter_roles|join:',' }}"
                                            data-user-slots="{{ user_slots|join:',' }}"
                                            data-active-slot="{{ active_slot }}">
                                            {% if card_stack_state == "ineligible" %}
                                                <i class="fa-solid fa-ban"></i>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                {% endif %}
                                {% if room.table_status == "SKY_SELECT" %}
                                    <button id="id_pick_sky_btn" class="btn btn-primary">PICK<br>SKY</button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {# Seats — fa-chair layout persists from ROLE_SELECT through SIG_SELECT #}
                    {% for pos in gate_positions %}
                        <div class="table-seat{% if pos.role_label in starter_roles %} role-confirmed{% endif %}"
                             data-slot="{{ pos.slot.slot_number }}" data-role="{{ pos.role_label }}">
                            <i class="fa-solid fa-chair"></i>
                            <span class="seat-role-label">{{ pos.role_label }}</span>
                            {% if pos.role_label in starter_roles %}
                                <i class="position-status-icon fa-solid fa-circle-check"></i>
                            {% else %}
                                <i class="position-status-icon fa-solid fa-ban"></i>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# Sig Select overlay — only shown to seated gamers in this polarity #}
        {% if room.table_status == "SIG_SELECT" and user_polarity %}
            {% include "apps/gameboard/_partials/_sig_select_overlay.html" %}
        {% endif %}

        {% if room.gate_status != "RENEWAL_DUE" and room.table_status != "SIG_SELECT" %}
            {% include "apps/gameboard/_partials/_table_positions.html" %}
        {% endif %}
        {% if not room.table_status and room.gate_status != "RENEWAL_DUE" %}
            {% include "apps/gameboard/_partials/_gatekeeper.html" %}
        {% endif %}
        {% if room.table_status %}
        <div id="id_tray_wrap"{% if room.table_status == "ROLE_SELECT" and starter_roles|length < 6 %} class="role-select-phase"{% endif %}>
            <div id="id_tray_handle">
                <div id="id_tray_grip"></div>
                <button id="id_tray_btn" aria-label="Open seat tray">
                    <i class="fa-solid fa-dice-d20"></i>
                </button>
            </div>
            <div id="id_tray" style="display:none"><div id="id_tray_grid" data-role-icons-url="{% static 'apps/epic/icons/cards-roles/' %}">{% if my_tray_role %}<div class="tray-cell tray-role-card" data-role="{{ my_tray_role }}"><img src="{% static my_tray_scrawl_static_path %}" alt="{{ my_tray_role }}"></div>{% else %}<div class="tray-cell"></div>{% endif %}{% if my_tray_sig %}<div class="tray-cell tray-sig-card"><img src="{% static 'apps/epic/icons/cards-sigs/Blank.svg' %}" alt="{{ my_tray_sig.name }}"></div>{% else %}<div class="tray-cell"></div>{% endif %}{% for i in "345678" %}<div class="tray-cell"></div>{% endfor %}</div></div>
        </div>
        {% endif %}
        {% include "apps/gameboard/_partials/_room_gear.html" %}
    </div>
{% endblock content %}

{% block scripts %}
    <script src="{% static 'apps/epic/room.js' %}"></script>
    <script src="{% static 'apps/epic/gatekeeper.js' %}"></script>
    <script src="{% static 'apps/epic/role-select.js' %}"></script>
    <script src="{% static 'apps/epic/sig-select.js' %}"></script>
    <script src="{% static 'apps/epic/tray.js' %}"></script>
{% endblock scripts %}