<section
    id="id_applet_my_sign"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2><a href="{% url 'billboard:my_sign' %}">My Sign</a></h2>
    <div class="my-sign-applet-body"
         data-polarity="{% if request.user.significator_reversed %}levity{% else %}gravity{% endif %}">
        {% if request.user.significator %}
            {% with card=request.user.significator %}
            {# Mirrors the my_sign.html `.sig-stage-card` layout — corner #}
            {# top-left, name + polarity qualifier in the face, mirror   #}
            {# corner bottom-right (pre-rotated). Sized to fill the     #}
            {# applet's vertical aperture via container queries in       #}
            {# `_billboard.scss`. `significator_reversed` is the POLARITY #}
            {# axis (True ↔ levity), so the saved sig is always upright  #}
            {# in its polarity — no `.stage-card--reversed` rotation.    #}
            <div class="my-sign-applet-card my-sign-applet-card--{% if request.user.significator_reversed %}levity{% else %}gravity{% endif %}{% if card.deck_variant.has_card_images %} my-sign-applet-card--image{% endif %}"
                 data-card-id="{{ card.id }}"
                 data-arcana-key="{{ card.arcana }}">
                {% if card.deck_variant.has_card_images %}
                    {% comment %}
                    Sprint A.6 — image-mode render mirrors my_sign.html's
                    .sig-stage-card--image treatment. Shares the SCSS rule
                    (comma-list selector) so the contour stroke + tray-card
                    silhouette black depth shadow + arcana stroke-color
                    come for free.
                    {% endcomment %}
                    <img class="sig-stage-card-img" src="{{ card.image_url }}" alt="{{ card.name }}">
                    {% if not card.deck_variant.is_polarized %}
                    {% comment %}
                    Non-polarized image deck: back-img element renders the
                    deck-back PNG that FLIP toggles to. Back-img stays gated
                    (back-img is meaningless for polarized decks or text-mode);
                    the FLIP btn itself moved OUT of this gate in polish-6 so
                    it renders for every card (per user-spec "allow the FLIP
                    btn everywhere"). The JS click handler is a no-op when no
                    back-img sibling exists.
                    {% endcomment %}
                    <img class="sig-stage-card-back-img" alt=""
                         src="{{ card.deck_variant.back_image_url }}">
                    {% endif %}
                {% else %}
                    <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="fan-card-face">
                        {% comment %}
                        `request.user.sig_face` is the rendering payload from
                        `TarotCard.applet_face()` — mirrors `populateCard` in
                        `stage-card.js:135-144`:
                          • Polarity-split (cards 48-49, trumps 19-21):
                            single-line title, qualifier blank.
                          • Major + qualifier: title carries a trailing
                            comma + qualifier renders BELOW.
                          • Non-Major (middle court, Schizo / Nomad w. no
                            qualifier): qualifier renders ABOVE the title.
                        {% endcomment %}
                        {% with face=request.user.sig_face %}
                        {% if face.qualifier_first %}
                            <p class="fan-card-qualifier">{{ face.qualifier }}</p>
                            <p class="fan-card-name">{{ face.title }}</p>
                        {% else %}
                            <p class="fan-card-name">{{ face.title }}</p>
                            <p class="fan-card-qualifier">{{ face.qualifier }}</p>
                        {% endif %}
                        {% endwith %}
                        <p class="fan-card-arcana">{{ card.get_arcana_display }}</p>
                    </div>
                    <div class="fan-card-corner fan-card-corner--br">
                        <span class="fan-corner-rank">{{ card.corner_rank }}</span>
                        {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
                    </div>
                {% endif %}
                {% comment %}
                Polish-6 — FLIP btn rendered UNCONDITIONALLY (was gated on
                `has_card_images and not is_polarized`). Per user-spec
                2026-05-25 PM "just allow the FLIP btn everywhere". JS
                handler below picks behavior by sibling existence: back-img
                present → flip-to-back animation; absent → no-op.
                {% endcomment %}
                <button class="btn btn-reveal my-sign-applet-flip-btn"
                        type="button"
                        aria-label="Flip card">FLIP</button>
            </div>
            {# Stat block — same shape as my_sign.html's `.sig-stat-block`  #}
            {# (Emanation face label + keyword list) but no SPIN/FYI btns  #}
            {# since the applet is a read-only preview. Saved sigs persist #}
            {# only the polarity axis (FLIP), never the orientation axis   #}
            {# (SPIN), so always render the upright/emanation face.        #}
            <div class="my-sign-applet-stat-block" data-arcana-key="{{ card.arcana }}">
                {% comment %}
                DRY stat-face — see `core/_partials/_stat_face.html`. The
                applet is the only server-render consumer (no SPIN, single
                emanation face); passes `card` so chip + title + arcana +
                keywords are filled from `card.*` at render time.
                {% endcomment %}
                {% include "core/_partials/_stat_face.html" with face_modifier="upright" label_text="Emanation" card=card %}
            </div>
            {% comment %}
            Polish-6 — applet FLIP btn handler. Mirrors my_sign.html's
            `_flipToBackAnimated()` (rotateY 0→90→0 over 500ms, class
            toggle at halfway, `data-flipping` attr for SCSS to hide the
            btn during animation). Script is now UNGATED (was conditional
            on `has_card_images and not is_polarized` like the FLIP btn
            itself); per user-spec "allow the FLIP btn everywhere", the
            handler always wires + gracefully no-ops when there's no
            `.sig-stage-card-back-img` sibling to toggle.
            {% endcomment %}
            <script>
            (function () {
                var applet = document.getElementById('id_applet_my_sign');
                if (!applet) return;
                var c = applet.querySelector('.my-sign-applet-card');
                var b = applet.querySelector('.my-sign-applet-flip-btn');
                if (!c || !b) return;
                b.addEventListener('click', function () {
                    if (c.dataset.flipping) return;
                    // No-op when no back-img to toggle (text-mode +
                    // polarized image-mode decks render no back-img).
                    if (!c.querySelector('.sig-stage-card-back-img')) return;
                    c.dataset.flipping = '1';
                    var rest = 'rotateY(0deg)';
                    var mid  = 'rotateY(90deg)';
                    c.animate([
                        { transform: rest },
                        { transform: mid, offset: 0.5 },
                        { transform: rest },
                    ], { duration: 500, easing: 'ease' });
                    setTimeout(function () {
                        c.classList.toggle('is-flipped-to-back');
                        b.classList.toggle(
                            'is-reversed',
                            c.classList.contains('is-flipped-to-back')
                        );
                    }, 250);
                    setTimeout(function () { delete c.dataset.flipping; }, 500);
                });
            }());
            </script>
            {% endwith %}
        {% else %}
            <p class="my-sign-applet-empty">No sign chosen yet.</p>
        {% endif %}
    </div>
</section>
