{% load i18n %}{% comment %}
Sig Select overlay — dark Gaussian modal over the dormant table hex.
Rendered for the current user's polarity group only.
Context: sig_cards, user_polarity, user_seat, sig_reserve_url, sig_reservations_json
{% endcomment %}
<div class="sig-backdrop"></div>
<div class="sig-overlay"
     data-polarity="{{ user_polarity }}"
     data-user-role="{{ user_seat.role }}"
     data-reserve-url="{{ sig_reserve_url }}"
     data-ready-url="{% url 'epic:sig_ready' room.id %}"

     data-ready="{{ user_ready|yesno:'true,false' }}"
     data-reservations="{{ sig_reservations_json }}">

    <div class="sig-modal">

        <div class="sig-stage" id="id_sig_stage">

            <div class="sig-stage-card" style="display:none">
                <div class="fan-card-corner fan-card-corner--tl">
                    <span class="fan-corner-rank"></span>
                    <i class="fa-solid stage-suit-icon" style="display:none"></i>
                </div>
                <div class="fan-card-face">
                    <p class="fan-card-name-group"></p>
                    <p class="sig-qualifier-above"></p>
                    <h3 class="fan-card-name"></h3>
                    <p class="sig-qualifier-below"></p>
                    <p class="fan-card-arcana"></p>
                    <p class="fan-card-correspondence"></p>{# not shown in sig-select — game-kit only #}
                </div>
                <div class="fan-card-corner fan-card-corner--br">
                    <span class="fan-corner-rank"></span>
                    <i class="fa-solid stage-suit-icon" style="display:none"></i>
                </div>
            </div>
            <div class="sig-stat-block">
                <button class="btn btn-reverse sig-flip-btn" type="button">FLIP</button>
                <button class="btn btn-caution sig-caution-btn" type="button">FYI</button>
                <div class="stat-face stat-face--upright">
                    <p class="stat-face-label">Upright</p>
                    <ul class="stat-keywords" id="id_stat_keywords_upright"></ul>
                </div>
                <div class="stat-face stat-face--reversed">
                    <p class="stat-face-label">Reversed</p>
                    <ul class="stat-keywords" id="id_stat_keywords_reversed"></ul>
                </div>
                <div class="sig-caution-tooltip" id="id_sig_caution">
                    <div class="sig-caution-header">
                        <h4 class="sig-caution-title">Caution!</h4>
                        <p class="sig-caution-type">Rival Interaction</p>
                    </div>
                    <p class="sig-caution-shoptalk">[Shoptalk forthcoming]</p>
                    <p class="sig-caution-effect"></p>
                    <span class="sig-caution-index"></span>
                </div>
                <button class="btn btn-nav-left sig-caution-prev" type="button">PRV</button>
                <button class="btn btn-nav-right sig-caution-next" type="button">NXT</button>
            </div>
        </div>

        <div class="sig-deck-grid" id="id_sig_deck">
            {% for card in sig_cards %}
            <div class="sig-card {{ user_polarity }}-deck"
                 data-card-id="{{ card.id }}"
                 data-suit-icon="{{ card.suit_icon }}"
                 data-corner-rank="{{ card.corner_rank }}"
                 data-name-group="{{ card.name_group }}"
                 data-name-title="{{ card.name_title }}"
                 data-arcana="{{ card.get_arcana_display }}"
                 data-correspondence="{{ card.correspondence|default:'' }}"
                 data-keywords-upright="{{ card.keywords_upright|join:',' }}"
                 data-keywords-reversed="{{ card.keywords_reversed|join:',' }}"
                 data-cautions="{{ card.cautions_json }}">
                <div class="fan-card-corner fan-card-corner--tl">
                    <span class="fan-corner-rank">{{ card.corner_rank }}</span>
                    {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
                </div>
                <div class="sig-card-actions">
                    <button class="sig-ok-btn btn btn-confirm" type="button">OK</button>
                    <button class="sig-nvm-btn btn btn-cancel" type="button">NVM</button>
                </div>
                <div class="sig-card-cursors">
                    <i class="fa-solid fa-hand-pointer sig-cursor sig-cursor--left"></i>
                    <i class="fa-solid fa-hand-pointer sig-cursor sig-cursor--mid"></i>
                    <i class="fa-solid fa-hand-pointer sig-cursor sig-cursor--right"></i>
                </div>
            </div>
            {% endfor %}
        </div>

    </div>
</div>