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

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

{% block content %}
{# Phase B spectator surface — an ACCEPTED invitee watches {{ owner|at_handle }}'s #}
{# Sea read-only. The owner's my_sea.html is left untouched; this is a       #}
{# dedicated, simpler template: the table hex (seat 1C = owner, 2C = this     #}
{# visitor) + the owner's draw rendered read-only (no FLIP / DEL / AUTO       #}
{# DRAW). GATE VIEW opens the visitor gate; once a token is deposited the     #}
{# center btn becomes VIEW DRAW (toggles the read-only draw into view).       #}
<div class="my-sea-page my-sea-visit-page"
     data-phase="landing"
     data-spectator="true"
     data-polarity="{% if significator_reversed %}levity{% else %}gravity{% endif %}">

    <div class="my-sea-landing my-sea-visit-landing">
        <div class="room-shell">
            <div id="id_game_table" class="room-table">
                <div class="room-table-scene">
                    <div class="table-hex-border">
                        <div class="table-hex">
                            <div class="table-center">
                                {% if seat2_present %}
                                    {# Visitor is present — VIEW DRAW reveals the owner's #}
                                    {# read-only draw (client-side toggle below).         #}
                                    <button id="id_my_sea_view_draw_btn" type="button"
                                            class="btn btn-primary">VIEW<br>DRAW</button>
                                {% else %}
                                    {# Not yet present — GATE VIEW → visitor token gate.  #}
                                    <button id="id_my_sea_gate_view_btn" type="button"
                                            class="btn btn-primary"
                                            data-gate-url="{% url 'my_sea_visit_gate' owner.id %}">GATE<br>VIEW</button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% for n in "123456" %}
                        {% if n == '1' and seat1_present %}
                            <div class="table-seat seated" data-slot="1"
                                 data-seat-token="owner-{{ owner.id }}-{{ owner_draw_id }}">
                                <i class="fa-solid fa-chair"></i>
                                <span class="seat-position-label">1C</span>
                                <i class="position-status-icon fa-solid fa-circle-check"></i>
                            </div>
                        {% elif n == '2' and seat2_present %}
                            <div class="table-seat seated" data-slot="2"
                                 data-seat-token="visit-{{ sea_invite.id }}">
                                <i class="fa-solid fa-chair"></i>
                                <span class="seat-position-label">2C</span>
                                <i class="position-status-icon fa-solid fa-circle-check"></i>
                            </div>
                        {% else %}
                            <div class="table-seat" data-slot="{{ n }}">
                                <i class="fa-solid fa-chair"></i>
                                <span class="seat-position-label">{{ n }}C</span>
                                <i class="position-status-icon fa-solid fa-ban"></i>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    {% if seat2_present %}
    {# Owner's draw, read-only. Hidden until VIEW DRAW toggles it in. #}
    <div id="id_my_sea_visit_draw" class="my-sea-visit-draw" style="display:none">
        {% include "apps/gameboard/_partials/_my_sea_readonly_draw.html" %}
    </div>
    {% endif %}

    {# Gear menu — NVM (back to /gameboard/) + BYE (drop presence, free 2C). #}
    {% url 'my_sea_visit_leave' owner.id as leave_url %}
    {% include "apps/gameboard/_partials/_my_sea_gear.html" with leave_url=leave_url %}
    {# Burger fan — carries the voice sub-btn (active while voice_active). #}
    {% include "apps/gameboard/_partials/_burger.html" %}
</div>
{% endblock content %}

{% block scripts %}
    <script src="{% static 'apps/gameboard/my-sea-seats.js' %}"></script>
    <script src="{% static 'apps/epic/burger-btn.js' %}"></script>
    <script>
    (function () {
        // VIEW DRAW toggles the read-only draw against the table hex.
        var viewBtn = document.getElementById('id_my_sea_view_draw_btn');
        var draw = document.getElementById('id_my_sea_visit_draw');
        var landing = document.querySelector('.my-sea-visit-landing');
        if (viewBtn && draw) {
            viewBtn.addEventListener('click', function () {
                var showing = draw.style.display !== 'none';
                draw.style.display = showing ? 'none' : '';
                if (landing) landing.style.display = showing ? '' : 'none';
            });
        }
        // GATE VIEW → visitor gate.
        var gateBtn = document.getElementById('id_my_sea_gate_view_btn');
        if (gateBtn) {
            gateBtn.addEventListener('click', function () {
                window.location.href = gateBtn.dataset.gateUrl || '#';
            });
        }
    }());
    </script>
{% endblock scripts %}
