{# HTMX modal fragment for previewing a card #}
{# HTMX modal fragment for previewing a card in Top Trumps style #}
<div class="modal is-active" id="card-preview-modal">
  <div class="modal-background" onclick="closeCardPreview()" ></div>
  <div class="modal-content">
    <div style="max-width:920px; margin:0 auto;">
      <div style="display:flex; justify-content:center;">
        <div class="toptrump-card">
          {# Hero / image banner using background image if available #}
          <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}');">
            {% if card.image %}
              <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
            {% endif %}
          </div>
          <div class="title-band">{{ card.name }}</div>
          <div class="card-body">
            <div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
              {% if card.diet == 'herbivore' %}
                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#fff;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
              {% elif card.diet == 'carnivore' %}
                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#fff;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
              {% else %}
                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#fff;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
              {% endif %}
            </div>
            <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>

            {% if card.facts_list %}
              <div>
                <strong>Fun facts</strong>
                <ul class="fact-list">
                  {% for fact in card.facts_list %}
                    <li>{{ fact }}</li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}

            <div style="margin-top:0.8rem">
              <div class="stat-row">
                <div class="stat-label">Speed <small class="is-size-7">(km/h)</small></div>
                <div class="stat-value" style="margin-left:8px;font-weight:700">
                  <div>{{ card.speed_display }}</div>
                  <div class="is-size-7" style="font-weight:500; display:flex; align-items:center; gap:8px;"><div class="stars">{% for t in card.speed_star_types_adj|default:card.speed_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}</div> <span style="margin-left:6px">(orig: {{ card.speed_orig }})</span></div>
                </div>
              </div>
              <div class="stat-row">
                <div class="stat-label">Weight <small class="is-size-7">(kg)</small></div>
                <div class="stat-value" style="margin-left:8px;font-weight:700">
                  <div>{{ card.weight_display }}</div>
                  <div class="is-size-7" style="font-weight:500; display:flex; align-items:center; gap:8px;"><div class="stars">{% for t in card.weight_star_types_adj|default:card.weight_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}</div> <span style="margin-left:6px">(orig: {{ card.weight_orig }})</span></div>
                </div>
              </div>
              <div class="stat-row">
                <div class="stat-label">Intelligence <small class="is-size-7">(score)</small></div>
                <div class="stat-value" style="margin-left:8px;font-weight:700">
                  <div style="display:flex;align-items:center;gap:8px"><div class="is-size-7" style="font-weight:600"><div class="stars">{% for t in card.intelligence_star_types_adj|default:card.intelligence_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}</div></div>
                    <div class="is-size-7" style="font-weight:500">(orig: {{ card.intelligence_orig }})</div></div>
                </div>
              </div>
              <div class="stat-row">
                <div class="stat-label">Height <small class="is-size-7">(m)</small></div>
                <div class="stat-value" style="margin-left:8px;font-weight:700">
                  <div>{{ card.height_display }}</div>
                  <div class="is-size-7" style="font-weight:500; display:flex; align-items:center; gap:8px;"><div class="stars">{% for t in card.height_star_types_adj|default:card.height_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}</div> <span style="margin-left:6px">(orig: {{ card.height_orig }})</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close" onclick="closeCardPreview()"></button>
</div>