{% comment %}
DRY stat-face partial — used by all 4 stat-block surfaces:
sig-stat-block (my_sign main + sig-overlay), sea-stat-block (sea_stage
modal), fan-stage-block (game_kit carousel), my-sign-applet-stat-block
(billboard applet). Sprint A.7.5-polish-5 DRY extraction 2026-05-25 PM
per user request "Why are there so many individual instances of this
feature? Couldn't we call the same DRY partial for each?".

Args:
  face_modifier  Required. "upright" or "reversed" — appended to .stat-face
                 BEM modifier class. The 3 SPIN-capable surfaces (my_sign /
                 sea_stage / fan) call this partial TWICE (once per face)
                 so .is-reversed on the parent stat-block can swap which
                 face displays. The applet calls it ONCE w. "upright".
  label_text     Required. "Emanation" or "Reversal" — static label text.
  card           Optional. TarotCard instance for server-render mode (the
                 applet's sole consumption pattern). When present: chip
                 rank/icon + title + arcana + keywords are server-filled
                 from card.*; when None: fields render empty for stage-
                 card.js's `populateStatExtras` to populate at runtime
                 (sig / sea_stage / fan stage).
  keywords_ul_id Optional. Adds `id="..."` to the keyword `<ul>`. Used by
                 sea_stage (`id_sea_stat_upright/reversed`) + fan stage
                 (`id_fan_stat_upright/reversed`) for stage-card.js's
                 `populateKeywords` surface-specific selector overrides.
{% endcomment %}
<div class="stat-face stat-face--{{ face_modifier }}">
    <div class="stat-face-header">
        <span class="stat-chip-rank">{% if card %}{{ card.corner_rank }}{% endif %}</span>
        <div class="stat-chip-tag">
            {% if card and card.suit_icon %}<i class="fa-solid {{ card.suit_icon }} stat-chip-icon"></i>{% else %}<i class="fa-solid stat-chip-icon" style="display:none"></i>{% endif %}
            <p class="stat-face-label">{{ label_text }}</p>
        </div>
    </div>
    <p class="stat-face-title">{% if card %}{{ card.name }}{% endif %}</p>
    <p class="stat-face-arcana">{% if card %}{{ card.get_arcana_display }}{% endif %}</p>
    <ul class="stat-keywords"{% if keywords_ul_id %} id="{{ keywords_ul_id }}"{% endif %}>{% if card %}{% for kw in card.keywords_upright %}<li>{{ kw }}</li>{% endfor %}{% endif %}</ul>
</div>