{% extends "_base.html" %}
{% from "_macros.html" import avatar, ribbon %}
{#- 每局一张卡片，照 bf-manager 网页玩家页「对局」：左边色条和阵营旗帜标胜负，地图缩略图，下面是战绩和击杀最多的武器。
    没有对局时插件回文字，不画这张图。 -#}
{% block style %}
  .who { display: flex; align-items: center; gap: 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; }
  .kpis { display: grid; grid-template-columns: repeat(5, 1fr); margin: 2px 0 18px; padding: 16px 22px; background: var(--panel); border-top: 1px solid var(--line); }
  .kpi .v { font-family: "Oswald", sans-serif; font-size: 34px; font-weight: 600; line-height: 1.2; }
  .kpi:first-child .v { color: var(--amber); }
  .rounds { display: grid; grid-template-columns: repeat({{ columns }}, minmax(0, 1fr)); gap: 14px; }
  .round { position: relative; background: var(--panel); padding: 16px 20px 16px 28px;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 45%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
  .round::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--accent); }
  .top { display: flex; align-items: center; gap: 18px; }
  .side { width: 92px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .side img { width: 54px; height: 54px; object-fit: contain; }
  .side .nf { width: 54px; height: 54px; border: 2px dashed var(--line); }
  .side b { font-size: 18px; letter-spacing: .08em; color: var(--accent); white-space: nowrap; }
  .thumb { width: 176px; height: 99px; flex: none; object-fit: cover; background: rgba(255,255,255,.08);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
  .info { min-width: 0; flex: 1; }
  .map { font-size: 28px; font-weight: 700; line-height: 1.25; }
  .map small { margin-left: 10px; font-size: 18px; font-weight: 500; color: var(--amber-soft); }
  .meta, .server { margin-top: 4px; font-size: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kit { width: 84px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 17px; color: var(--muted); }
  .kit img { width: 46px; height: 46px; object-fit: contain; }
  .bottom { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 16px; }
  .badge { display: inline-block; margin-left: 10px; padding: 0 7px; font-size: 16px; font-weight: 800; line-height: 26px; vertical-align: 5px; letter-spacing: .04em; }
  .badge.mvp { background: var(--amber); color: #000; }
  .badge.ace { border: 2px solid rgba(251,191,36,.6); color: var(--amber-soft); line-height: 22px; }
  .stat .c { margin-top: 2px; font-size: 15px; color: var(--muted); white-space: nowrap; }
  .stat .c .d { font-size: 16px; }
  .stat .s { margin-left: 5px; font-family: "Oswald", sans-serif; font-weight: 600; }
  .stat .s.up { color: #34d399; }
  .stat .s.down { color: #fb7185; }
  .parts { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .parts .bar { display: flex; height: 9px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.06); }
  .parts .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 15px; color: var(--muted); }
  .parts .legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .parts .legend i { width: 8px; height: 8px; border-radius: 50%; }
  .parts .legend b { font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 500; color: var(--soft); }
  .honor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .chip { padding: 2px 9px; font-size: 16px; background: rgba(255,255,255,.08); color: var(--soft); white-space: nowrap; }
  .chip.hi { background: rgba(251,191,36,.14); color: #fde68a; }
  .rbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .rb { display: flex; align-items: center; gap: 4px; font-size: 16px; color: var(--soft); }
  .rb .d { font-size: 17px; }
  .stat .v { font-family: "Oswald", sans-serif; font-size: 28px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
  .stat:first-child .v { color: var(--text); font-weight: 700; }
  .gear { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .gun { min-width: 0; }
  .gun .pic { position: relative; height: 58px; padding-left: 56px; display: flex; align-items: center; justify-content: center; background: #6e6e74; }
  .gun img { max-width: 200px; max-height: 50px; object-fit: contain; }
  .gun .k { position: absolute; left: 0; top: 0; padding: 0 8px; background: rgba(0,0,0,.72);
    font-family: "Oswald", sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--amber); }
  .gun .k small { margin-left: 3px; font-family: "SC", sans-serif; font-size: 17px; font-weight: 400; color: var(--soft); }
  .gun .n { margin-top: 6px; font-size: 18px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gun .x { margin-top: 3px; font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gun .x b { font-family: "Oswald", sans-serif; font-size: 17px; font-weight: 500; color: var(--soft); }
  .gun .x .up { color: #34d399; }
  .gun .x .down { color: #fb7185; }
  .note { margin-top: 8px; font-size: 17px; color: var(--amber-soft); }
  .hint { margin-top: 14px; font-size: 17px; color: var(--muted); text-align: center; }
{% endblock %}
{% block body %}
<div class="who">
  {{ avatar(avatar_url, false, 84) }}
  <div>
    <div class="eyebrow">Battlefield 1 · 最近对局</div>
    <h1>{% if tag %}<span class="tag">[{{ tag }}]</span>{% endif %}{{ name }}</h1>
  </div>
</div>
<div class="kpis">
  {% for label, value in kpis %}<div class="kpi"><div class="label">{{ label }}</div><div class="v">{{ value }}</div></div>{% endfor %}
</div>
<div class="rounds">
  {% for r in rounds %}
  <div class="round" style="--accent: {{ r.color }}">
    <div class="top">
      <div class="side">
        {% if r.flag %}<img src="{{ r.flag }}">{% else %}<div class="nf"></div>{% endif %}
        <b>{{ r.outcome }}</b>
      </div>
      {% if r.map_image %}<img class="thumb" src="{{ r.map_image }}">{% else %}<div class="thumb"></div>{% endif %}
      <div class="info">
        <div class="map">{{ r.map }}{% if r.mode %}<small>{{ r.mode }}</small>{% endif %}{% if r.mvp %}<span class="badge mvp">MVP</span>{% endif %}{% if r.ace %}<span class="badge ace">王牌</span>{% endif %}</div>
        <div class="meta"><span class="d">{{ r.when }}</span> · {{ r.minutes }} · {{ r.faction }}</div>
        <div class="server">{{ r.server }}</div>
      </div>
      <div class="kit">{% if r.portrait %}<img src="{{ r.portrait }}">{% endif %}{{ r.kit }}</div>
    </div>
    <div class="bottom">
      {#- 能和这一局之前的生涯比的，下面写生涯值和这一局让它变了多少 -#}
      <div class="stats">
        {% for c in r.stats %}<div class="stat"><div class="label">{{ c.label }}</div><div class="v">{{ c.value }}</div>
          {%- if c.compare %}<div class="c">生涯 <span class="d">{{ c.compare.career }}</span>{% if c.compare.shift %}<span class="s {{ c.compare.trend }}">{{ '▲' if c.compare.trend == 'up' else '▼' if c.compare.trend == 'down' else '' }}{{ c.compare.shift }}</span>{% endif %}</div>{% endif %}</div>{% endfor %}
      </div>
      {#- 得分构成：左边是计分板上的分，右边淡色是结算时另给的经验 -#}
      {% if r.parts %}
      <div class="parts">
        <div class="bar">{% for x in r.parts.segments %}<i style="width: {{ x.pct }}%; background: {{ x.color }}"></i>{% endfor %}</div>
        <div class="legend">{% for x in r.parts.segments %}<span><i style="background: {{ x.color }}"></i>{{ x.label }} <b>{{ x.value }}</b></span>{% endfor %}<span>总经验 <b>{{ r.parts.total }}</b></span></div>
      </div>
      {% endif %}
      {% if r.growth or r.ribbons %}
      <div class="honor">
        {% for text, hi in r.growth %}<span class="chip{{ ' hi' if hi }}">{{ text }}</span>{% endfor %}
        {% if r.ribbons %}<div class="rbs">{% for rb in r.ribbons %}<span class="rb">{{ ribbon(rb.image, 26) }}{% if rb.count > 1 %}×<span class="d">{{ rb.count }}</span>{% endif %}</span>{% endfor %}{% if r.more_ribbons %}<span class="rb">另 {{ r.more_ribbons }} 种</span>{% endif %}</div>{% endif %}
      </div>
      {% endif %}
      {#- 武器在战绩下面单独一行：图上角标写击杀，名字在图下面单独一行 -#}
      {% if r.gear %}
      <div class="gear">
        {% for g in r.gear %}
        <div class="gun">
          <div class="pic"><span class="k">{{ g.kills }}<small>杀</small></span>{% if g.image %}<img src="{{ g.image }}">{% endif %}</div>
          <div class="n">{{ g.name }}</div>
          {#- 和这件武器自己的生涯比：箭头是高于、低于生涯，差不到 5% 不标 -#}
          {% for c in g.compare %}<div class="x">{{ c.label }} <b>{{ c.value }}</b>{% if c.trend %}<span class="{{ c.trend }}">{{ ' ▲' if c.trend == 'up' else ' ▼' }}</span>{% endif %} · 生涯 {{ c.career }}</div>{% endfor %}
          {% if g.headshots %}<div class="x">爆头 <b>{{ g.headshots }}</b></div>{% endif %}
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% if r.suspect %}<div class="note">这一局的数据混进了相邻对局，仅供参考</div>{% endif %}
  </div>
  {% endfor %}
</div>
<div class="hint">只含 bf-manager 跟踪到的对局，保留 90 天</div>
{% endblock %}