<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 %}"
                 data-card-id="{{ card.id }}">
                <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">
                    {# `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.   #}
                    {% 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>
            </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">
                <p class="stat-face-label">Emanation</p>
                <ul class="stat-keywords">
                    {% for kw in card.keywords_upright %}
                        <li>{{ kw }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endwith %}
        {% else %}
            <p class="my-sign-applet-empty">No sign chosen yet.</p>
        {% endif %}
    </div>
</section>
