{# Read-only render of the owner's draw for a my-sea spectator (Phase B of    #}
{# [[my-sea-invite-voice-blueprint]]). Mirrors `_applet-my-sea.html`'s slot   #}
{# markup off the same `latest_draw_slots` payload (`my_sea_slots`), but      #}
{# standalone + with NO interactive affordances (FLIP / DEL / AUTO DRAW).     #}
<div class="my-sea-scroll my-sea-visit-scroll">
{% for slot in my_sea_slots %}
    {% if slot.card %}
        <div class="my-sea-slot-wrap">
            <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 %}
                    <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">
                        {% 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>