python-tdd/src/templates/apps/gameboard/_partials/_tarot_fan.html

{% load tarot_filters %}
{% for card in cards %}
<div class="fan-card{% if card.deck_variant.has_card_images %} fan-card--image{% endif %}"
     data-index="{{ forloop.counter0 }}"
     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-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 }}"
     data-image-url="{{ card.image_url|default:'' }}">
    {% if card.deck_variant.has_card_images %}
        {# Sprint A.7.5 — image-mode card face. The image IS the card; the   #}
        {# adjacent stat block (in #id_fan_stage_block) is the sole home for #}
        {# textual metadata (chip, EMANATION/REVERSAL header, title, arcana, #}
        {# keywords). For non-polarized image-equipped decks the FLIP btn    #}
        {# flips this card to its back-image (mirrors my_sign.html's A.5-    #}
        {# polish-2 pattern). The back-img defaults to display:none via CSS; #}
        {# `.fan-card.is-flipped-to-back` toggles visibility.                #}
        <img class="sig-stage-card-img" src="{{ card.image_url }}" alt="{{ card.name_title }}">
        {% if not card.deck_variant.is_polarized %}
        <img class="sig-stage-card-back-img" alt=""
             src="{{ card.deck_variant.back_image_url }}">
        {% endif %}
    {% else %}
        {# Text-mode (Earthman + RWS today): existing corner + face scaffold #}
        {# unchanged from pre-A.7.5. Will be removed once both decks have    #}
        {# images (user's plan: scrape RWS art today; Earthman public-domain #}
        {# paintings to follow). "Shabby cardstock" non-equippable Earthman  #}
        {# variant will retain this text rendering as a legacy preservation. #}
        <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">
            <div class="fan-card-face-upright">
                {% if card.gravity_emanation %}
                    {# Polarity-split title (cards 48-49 + trumps 19-21); no qualifier slots — qualifier is baked into the title between "The" and the proper noun #}
                    <p class="fan-card-name {{ card.title_squeeze_class }}">{{ card.gravity_emanation|italicize:card.italic_word }}</p>
                {% else %}
                    {% if card.name_group %}<p class="fan-card-name-group">{{ card.name_group }}</p>{% endif %}
                    {% if card.arcana != "MAJOR" and card.gravity_qualifier %}
                        <p class="sig-qualifier-above">{{ card.gravity_qualifier }}</p>
                    {% endif %}
                    <p class="fan-card-name {{ card.title_squeeze_class }}">{{ card.name_title|italicize:card.italic_word }}{% if card.arcana == "MAJOR" and card.gravity_qualifier %},{% endif %}</p>
                    {% if card.arcana == "MAJOR" and card.gravity_qualifier %}
                        <p class="sig-qualifier-below">{{ card.gravity_qualifier }}</p>
                    {% endif %}
                {% endif %}
            </div>
            <p class="fan-card-arcana">{{ card.get_arcana_display }}</p>
            <div class="fan-card-face-reversal">
                {% comment %}
                    Class names always match semantic content: qualifier text in
                    .fan-card-reversal-qualifier, title text in .fan-card-reversal-name.
                    DOM order is per-arcana, controlling visual layout after the 180°
                    SPIN rotation (DOM-second appears visually on top):
                      Major / polarity-split — title on top    → name class is DOM-second
                      Non-major              — qualifier on top → qualifier class is DOM-second
                {% endcomment %}
                {% if card.gravity_reversal %}
                    {# Polarity-split: single-line title in the name slot, qualifier slot empty. #}
                    <p class="fan-card-reversal-qualifier"></p>
                    <p class="fan-card-reversal-name {{ card.title_squeeze_class }}">{{ card.gravity_reversal|italicize:card.italic_word }}</p>
                {% elif card.arcana == "MAJOR" %}
                    <p class="fan-card-reversal-qualifier">{{ card.gravity_qualifier|default:card.levity_qualifier }}</p>
                    <p class="fan-card-reversal-name {{ card.title_squeeze_class }}">{{ card.name_title|italicize:card.italic_word }}{% if card.gravity_qualifier %},{% endif %}</p>
                {% else %}
                    <p class="fan-card-reversal-name {{ card.title_squeeze_class }}">{{ card.name_title|italicize:card.italic_word }}</p>
                    <p class="fan-card-reversal-qualifier">{{ card.reversal_qualifier|default:card.gravity_qualifier }}</p>
                {% endif %}
            </div>
        </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 %}
</div>
{% endfor %}