<section
    id="id_applet_my_sea"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2><a href="{% url 'my_sea' %}">My Sea</a></h2>
    {# `my_sea_slots` (built by `latest_draw_slots()` in `gameboard.models`)  #}
    {# carries one entry per spread position in DRAW_ORDER — filled slots    #}
    {# render the drawn card, empty slots render as labelled placeholders.   #}
    {# Spread lock-in: the row is created at first card draw, so the moment  #}
    {# 1+ cards exist all the spread's positions show in the applet. The    #}
    {# scroll container handles overflow (mirrors the Palettes applet).     #}
    {# Slot display is INDEPENDENT of `request.user.significator_id` — the   #}
    {# MySeaDraw row snapshots the sig at first-draw time (see              #}
    {# `gameboard.models.MySeaDraw` doc lines 130-132), so a subsequent     #}
    {# my-sign DEL doesn't invalidate the saved draw. The sig-gate Brief    #}
    {# banner only shows when the user has NO draws AND no sig — once draws #}
    {# exist, they render regardless of current sig state (user spec        #}
    {# 2026-05-25 PM bug-report).                                            #}
    {% if my_sea_slots %}
        <div class="my-sea-scroll">
        {% for slot in my_sea_slots %}
            {% if slot.card %}
                <div class="my-sea-slot-wrap">
                    {# Mirrors the my_sign.html `.sig-stage-card` layout —     #}
                    {# corner top-left, face w. name + arcana, mirror corner   #}
                    {# bottom-right. Label is a SIBLING of the slot inside    #}
                    {# the wrap so it sits BELOW the slot box (user-spec      #}
                    {# 2026-05-23: same position as the my_sea.html picker's  #}
                    {# `.sea-pos-label`).                                       #}
                    <div class="my-sea-slot my-sea-slot--filled my-sea-slot--{{ slot.polarity }}{% if slot.reversed %} my-sea-slot--reversed{% endif %}{% if slot.card.deck_variant.has_card_images %} my-sea-slot--image{% endif %}"
                         data-position="{{ slot.position }}"
                         data-card-id="{{ slot.card.id }}"
                         data-arcana-key="{{ slot.card.arcana }}">
                        {% if slot.card.deck_variant.has_card_images %}
                            {# Sprint A.7 — image-mode slot render. Shares the    #}
                            {# `.sig-stage-card-img` SCSS rule via the            #}
                            {# `.my-sea-slot--image` comma-list addition in       #}
                            {# `_card-deck.scss`. Contour stroke + depth shadow   #}
                            {# scale w. the slot's smaller dimensions.            #}
                            <img class="sig-stage-card-img" src="{{ slot.card.image_url }}" alt="{{ slot.card.name }}">
                        {% else %}
                            <div class="fan-card-corner fan-card-corner--tl">
                                <span class="fan-corner-rank">{{ slot.card.corner_rank }}</span>
                                {% if slot.card.suit_icon %}<i class="fa-solid {{ slot.card.suit_icon }}"></i>{% endif %}
                            </div>
                            <div class="fan-card-face">
                                {# `slot.face` is the rendering payload from `TarotCard. #}
                                {# applet_face()` — mirrors `populateCard` in            #}
                                {# `stage-card.js`:                                      #}
                                {#   • Polarity-split (cards 19-21, 48-49): single-line  #}
                                {#     title, qualifier blank.                            #}
                                {#   • Pattern B Major (2-5, 10-15, 22-35, 41): swapped  #}
                                {#     reversal name + polarity qualifier carried.       #}
                                {#   • Pattern B' Major (16-18): swapped reversal name,  #}
                                {#     no qualifier on reversal.                          #}
                                {#   • Non-Major: qualifier ABOVE the title.              #}
                                {# Empty `.fan-card-qualifier` is hidden by `:empty` CSS. #}
                                {% if slot.face.qualifier_first %}
                                    <p class="fan-card-qualifier">{{ slot.face.qualifier }}</p>
                                    <p class="fan-card-name">{{ slot.face.title }}</p>
                                {% else %}
                                    <p class="fan-card-name">{{ slot.face.title }}</p>
                                    <p class="fan-card-qualifier">{{ slot.face.qualifier }}</p>
                                {% endif %}
                                <p class="fan-card-arcana">{{ slot.card.get_arcana_display }}</p>
                            </div>
                            <div class="fan-card-corner fan-card-corner--br">
                                <span class="fan-corner-rank">{{ slot.card.corner_rank }}</span>
                                {% if slot.card.suit_icon %}<i class="fa-solid {{ slot.card.suit_icon }}"></i>{% endif %}
                            </div>
                        {% endif %}
                    </div>
                    <span class="my-sea-slot-label">{{ slot.label }}</span>
                </div>
            {% else %}
                <div class="my-sea-slot-wrap">
                    <div class="my-sea-slot my-sea-slot--empty"
                         data-position="{{ slot.position }}"></div>
                    <span class="my-sea-slot-label my-sea-slot-label--empty">{{ slot.label }}</span>
                </div>
            {% endif %}
        {% endfor %}
        </div>
    {% else %}
        {% if not request.user.significator_id %}
            {% include "apps/gameboard/_partials/_my_sea_sign_gate_brief.html" %}
        {% endif %}
        <p class="my-sea-empty">No draws yet.</p>
    {% endif %}
</section>
