{% load tarot_filters %}
{% for card in cards %}
<div class="fan-card"
     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-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-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 }}">
    <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>
</div>
{% endfor %}