{% 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 class="room-shell">
            <div id="id_game_table" class="room-table">
                <div class="table-hex">
                    <div class="table-center">
                        {% if room.table_status == "ROLE_SELECT" and card_stack_state %}
                            <div class="card-stack" data-state="{{ card_stack_state }}"
                                 data-taken-roles="{{ taken_roles|join:',' }}"
                                 data-user-slots="{{ user_slots|join:',' }}">
                                {% if card_stack_state == "ineligible" %}
                                    <i class="fa-solid fa-ban"></i>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                {% for slot in room.gate_slots.all %}
                    <div class="table-seat{% if slot.slot_number == active_slot %} active{% endif %}"
                         data-slot="{{ slot.slot_number }}">
                        <div class="seat-portrait">{{ slot.slot_number }}</div>
                        <div class="seat-card-arc"></div>
                        <span class="seat-label">
                            {% if slot.gamer %}@{{ slot.gamer.username|default:slot.gamer.email }}{% endif %}
                        </span>
                    </div>
                {% endfor %}
            </div>
            <div id="id_inventory" class="room-inventory">
                <div id="id_inv_role_card">
                    {% if room.table_status == "ROLE_SELECT" %}
                        {% for seat in assigned_seats %}
                            <div class="card flipped">
                                <div class="card-back">?</div>
                                <div class="card-front">
                                    <div class="card-role-name">{{ seat.get_role_display }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    {% elif room.table_status == "SIG_SELECT" and user_seat %}
                        <div class="card face-up">
                            <div class="card-front">
                                <div class="card-role-name">{{ user_seat.get_role_display }}</div>
                            </div>
                        </div>
                        {% if partner_seat %}
                            <div class="partner-indicator">
                                Partner: {{ partner_seat.get_role_display }}
                            </div>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>

        {% if not room.table_status and room.gate_status != "RENEWAL_DUE" %}
            {% include "apps/gameboard/_partials/_gatekeeper.html" %}
        {% 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>
{% endblock scripts %}