{% extends "_base.html" %}
{% from "_macros.html" import star, avatar %}
{#- 卡片排版，配色和稀有度沿用 bf-manager 网页的 EquipmentTable。 -#}
{% block style %}
  .who { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding: 18px 22px; background: var(--panel); }
  .who h1 { margin: 2px 0 0; font-family: "Oswald", "SC", "WenQuanYi Zen Hei", sans-serif; font-size: 44px; line-height: 1.15; word-break: break-all; }
  .who h1 .tag { color: var(--muted); margin-right: 10px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .card { position: relative; background: var(--panel);
    clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
  .pic { position: relative; height: 124px; display: flex; align-items: center; justify-content: center;
    background: #7e7e84; border-bottom: 4px solid var(--accent); }
  .pic img { max-width: 300px; max-height: 100px; object-fit: contain; }
  .rank { position: absolute; left: 18px; top: 10px; font-family: "Oswald", sans-serif; font-size: 26px; font-weight: 700; color: #fff;
    padding: 0 8px; background: rgba(0,0,0,.72); }
  .rank.top { color: var(--amber); }
  .stars { position: absolute; right: 16px; top: 10px; display: inline-flex; align-items: center; gap: 4px;
    font-family: "Oswald", sans-serif; font-size: 26px; font-weight: 700; padding: 0 8px; background: rgba(0,0,0,.72); }
  .stars .star { width: 24px; height: 24px; }
  .body { padding: 14px 20px 18px; }
  .name { font-size: 24px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sub { margin-top: 4px; font-size: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid var(--line); }
  .stat .v { font-family: "Oswald", sans-serif; font-size: 28px; font-weight: 500; line-height: 1.2; }
  .stat:first-child .v { color: var(--amber); font-weight: 700; }
  .empty { padding: 30px 0; text-align: center; color: var(--muted); }
{% endblock %}
{% block body %}
<div class="who">
  {{ avatar(avatar_url, false, 84) }}
  <div>
    <div class="eyebrow">Battlefield 1 · {{ title }}</div>
    <h1>{% if tag %}<span class="tag">[{{ tag }}]</span>{% endif %}{{ name }}</h1>
  </div>
</div>
<div class="cards">
  {% for i in items %}
  {#- 60 星以上底边染成稀有度色，其余用分隔线色。 -#}
  <div class="card" style="--accent: {{ i.star_color if i.stars >= 60 else 'rgba(255,255,255,.14)' }}">
    <div class="pic">
      <span class="rank{{ ' top' if loop.index <= 3 }}">#{{ loop.index }}</span>
      {% if i.stars %}<span class="stars" style="color: {{ i.star_color }}">{{ star(i.star_color) }}{{ i.stars }}</span>{% endif %}
      {% if i.image %}<img src="{{ i.image }}">{% endif %}
    </div>
    <div class="body">
      <div class="name">{{ i.name }}</div>
      <div class="sub">{% if i.skin %}<span class="rarity-{{ i.rarity }}">{{ i.skin }}</span> · {% endif %}{{ i.category }}</div>
      <div class="stats">
        {% for label in columns %}<div class="stat"><div class="label">{{ label }}</div><div class="v">{{ i.stats[loop.index0] }}</div></div>{% endfor %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% if not items %}<section class="panel empty">还没有击杀记录</section>{% endif %}
{% endblock %}