{% load i18n %}{% comment %}
Sig Select stage — unified with the my_sign / my_sea card-stage apparatus
(2026-06-03). Renders INSIDE .room-hex-pane on edge-to-edge green --duoUser
felt (no dark Gaussian backdrop), replacing the hex content my_sea-style;
sig-select.js bootstraps off `.sig-overlay`'s data-* payload. 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-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 %}{% if user_seat %}?seat={{ user_seat.slot_number }}{% endif %}"

     data-ready="{{ user_ready|yesno:'true,false' }}"
     data-countdown-remaining="{{ countdown_remaining|default:0 }}"
     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">
                {# Image-mode slot — stage-card.js _setImageMode shows this <img> #}
                {# + adds .sig-stage-card--image when the focused card's          #}
                {# data-image-url is non-empty (image-equipped seat deck per      #}
                {# DeckVariant.has_card_images); else the text fan-card-* scaffold #}
                {# below takes over. Per-card src — works for mixed-deck piles    #}
                {# once the dubbodeck assembly lands (each card keeps its deck).  #}
                <img class="sig-stage-card-img" alt="" style="display:none">
                {# Non-polarized image decks (RWS / Minchiate): a FLIP .btn-reveal #}
                {# turns the preview to the FOCUSED card's deck card-back. The     #}
                {# back-img defaults display:none via SCSS; .is-flipped-to-back     #}
                {# (toggled by sig-select.js) reveals it. The shared                #}
                {# .my-sign-flip-btn rules already anchor/hide/counter-position on  #}
                {# any .sig-stage-card. Rendered when ANY pile card is backable     #}
                {# (`sig_pile_has_backs`); stage-card.js `_setImageMode` repoints   #}
                {# the src per focused card + hides FLIP for backless cards — so a  #}
                {# mixed dubbodeck pile FLIPs each card to its OWN deck's back.     #}
                {% if sig_pile_has_backs %}
                <img class="sig-stage-card-back-img" alt="">
                <button class="btn btn-reveal my-sign-flip-btn sig-flip-btn" type="button">FLIP</button>
                {% endif %}
                <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">
                    <div class="fan-card-face-upright">
                        <p class="fan-card-name-group"></p>
                        <p class="sig-qualifier-above"></p>
                        <p class="fan-card-name"></p>
                        <p class="sig-qualifier-below"></p>
                    </div>
                    <p class="fan-card-arcana"></p>
                    <p class="fan-card-correspondence"></p>{# not shown in sig-select — game-kit only #}
                    <div class="fan-card-face-reversal">
                        {# Default DOM order — matches non-major arcana layout (qualifier visually #}
                        {# on top after spin, title visually below). stage-card.js swaps the class #}
                        {# names on these <p>s for Major arcana so each element's class still #}
                        {# matches its semantic content (title → .fan-card-reversal-name etc.). #}
                        <p class="fan-card-reversal-name"></p>
                        <p class="fan-card-reversal-qualifier"></p>
                    </div>
                </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 spin-btn" type="button">SPIN</button>
                <button class="btn btn-info fyi-btn" type="button">FYI</button>
                {# DRY stat-face (rank-chip + title + arcana + keywords) — the   #}
                {# same shared partial my_sign / sea_stage / fan use. No `card`   #}
                {# arg → JS-populated by sig-select.js (populateStatExtras +      #}
                {# populateKeywords). keywords_ul_id keeps the <ul> ids sig-      #}
                {# select.js's #id_stat_keywords_* selectors target.             #}
                {% include "core/_partials/_stat_face.html" with face_modifier="upright" label_text="Emanation" keywords_ul_id="id_stat_keywords_upright" %}
                {% include "core/_partials/_stat_face.html" with face_modifier="reversed" label_text="Reversal" keywords_ul_id="id_stat_keywords_reversed" %}
                {% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_sig_tooltip" %}
            </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-arcana-key="{{ card.arcana }}"
                 data-image-url="{{ card.image_url }}"
                 {# Per-card FLIP back (dubbodeck): the card's OWN deck back, only #}
                 {# for non-polarized image decks (others → empty → stage-card.js  #}
                 {# hides the FLIP affordance for that card).                      #}
                 data-back-image-url="{% if card.deck_variant.has_card_images and not card.deck_variant.is_polarized %}{{ card.deck_variant.back_image_url }}{% endif %}"
                 data-correspondence="{{ card.correspondence|default:'' }}"
                 data-keywords-upright="{{ card.keywords_upright|join:',' }}"
                 data-keywords-reversed="{{ card.keywords_reversed|join:',' }}"
                 data-energies="{{ card.energies_json }}"
                 data-operations="{{ card.operations_json }}"
                 data-levity-qualifier="{{ card.levity_qualifier }}"
                 data-gravity-qualifier="{{ card.gravity_qualifier }}"
                 data-reversal-qualifier="{{ card.reversal_qualifier }}"
                 data-reversal-drops-qualifier="{{ card.reversal_drops_qualifier|yesno:'true,false' }}"
                 data-levity-emanation="{{ card.levity_emanation }}"
                 data-gravity-emanation="{{ card.gravity_emanation }}"
                 data-levity-reversal="{{ card.levity_reversal }}"
                 data-gravity-reversal="{{ card.gravity_reversal }}"
                 data-italic-word="{{ card.italic_word }}">
                {# Thumbnails stay glyph-only (rank + suit symbol) at every deck #}
                {# — `data-image-url` above feeds the STAGE preview's image only  #}
                {# (stage-card.js _setImageMode), never the thumbnail face.       #}
                <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>