{% load static %}
{# PICK SEA overlay — Celtic Cross spread entry                              #}
{# Included in room.html when table_status == "SKY_SELECT" and sky_confirmed #}
{# Layout is the reverse of PICK SKY: cards left (transparent), form right  #}

<div class="sea-backdrop"></div>
<div class="sea-overlay" id="id_sea_overlay">

    <div class="sea-modal-wrap">
    <div class="sea-modal">

        <header class="sea-modal-header">
            <h2>PICK <span>SEA</span></h2>
            <p>Choose your spread and draw your Celtic Cross.</p>
        </header>

        <div class="sea-modal-body">

            {# ── Cards column (transparent) ───────────────────────────── #}
            <div class="sea-cards-col">
                <div class="sea-cross">
                    {# Crown — position 3 #}
                    <div class="sea-cross-cell sea-pos-crown">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Past — position 4 #}
                    <div class="sea-cross-cell sea-pos-past">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Center — Significator (already placed) #}
                    <div class="sea-cross-cell sea-pos-center">
                        <div class="sea-card-slot sea-card-slot--sig">
                            {% if my_tray_sig %}
                                <span class="sea-sig-name">{{ my_tray_sig.name_title }}</span>
                            {% endif %}
                        </div>
                    </div>
                    {# Future — position 5 #}
                    <div class="sea-cross-cell sea-pos-future">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Root — position 1 #}
                    <div class="sea-cross-cell sea-pos-root">
                        <div class="sea-card-slot sea-card-slot--empty"></div>
                    </div>
                    {# Crossing — position 2 (rotated across center) #}
                    <div class="sea-cross-cell sea-pos-crossing">
                        <div class="sea-card-slot sea-card-slot--empty sea-card-slot--crossing"></div>
                    </div>
                </div>
            </div>

            {# ── Form column (priUser / opaque) ───────────────────────── #}
            <div class="sea-form-col">

                <div class="sea-form-main">
                    <div class="sea-field">
                        <label for="id_sea_spread">Spread</label>
                        <select id="id_sea_spread" name="spread" class="sea-select">
                            {% if user_polarity == "levity" %}
                                <option value="waite-smith" selected>Celtic Cross, Waite-Smith</option>
                                <option value="escape-velocity">Celtic Cross, Escape Velocity</option>
                            {% else %}
                                <option value="escape-velocity" selected>Celtic Cross, Escape Velocity</option>
                                <option value="waite-smith">Celtic Cross, Waite-Smith</option>
                            {% endif %}
                        </select>
                    </div>
                </div>

                <button type="button" id="id_sea_deal" class="btn btn-primary" disabled>
                    Deal
                </button>

            </div>

        </div>{# /.sea-modal-body #}

    </div>{# /.sea-modal #}

    <button type="button" id="id_sea_cancel" class="btn btn-cancel btn-sm">NVM</button>

    </div>{# /.sea-modal-wrap #}
</div>{# /.sea-overlay #}

<script>
(function () {
  'use strict';

  const overlay   = document.getElementById('id_sea_overlay');
  const cancelBtn = document.getElementById('id_sea_cancel');

  function openSea() {
    document.documentElement.classList.add('sea-open');
  }

  function closeSea() {
    document.documentElement.classList.remove('sea-open');
  }

  const pickSeaBtn = document.getElementById('id_pick_sea_btn');
  if (pickSeaBtn) pickSeaBtn.addEventListener('click', openSea);
  cancelBtn.addEventListener('click', closeSea);
  overlay.addEventListener('click', (e) => { if (e.target === overlay) closeSea(); });
})();
</script>