{% extends "_base.html" %}
{% from "_macros.html" import icon, avatar %}
{#- 对照 bf-manager 网页的 PlayerHeroBanner 与 CareerOverview。 -#}
{% block style %}
  .hero { position: relative; overflow: hidden; min-height: 330px; background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
    clip-path: polygon(0 28px, 28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%); }
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.35) 55%, transparent); }
  .hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, rgba(245,158,11,.7), rgba(245,158,11,.2) 50%, transparent); }
  .hero.banned::after { background: linear-gradient(90deg, rgba(239,68,68,.8), rgba(239,68,68,.3) 50%, transparent); }
  .portrait { position: absolute; right: 30px; bottom: 0; height: 340px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.9)); }
  .hero.banned .portrait, .hero.banned .who { filter: grayscale(1); }
  .best { position: absolute; right: 36px; bottom: 22px; z-index: 1; text-align: right; }
  .best .t { font-size: 11px; letter-spacing: .25em; color: rgba(255,255,255,.55); }
  .best .v { font-size: 28px; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
  .hero-body { position: relative; z-index: 1; padding: 28px 300px 30px 32px; }
  .warn { margin-bottom: 16px; padding: 7px 16px; background: rgba(220,38,38,.9); font-weight: 700; font-size: 14px;
    box-shadow: 0 0 18px rgba(239,68,68,.5); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
  .status { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
  .chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.3); color: rgba(255,255,255,.6); }
  .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #71717a; }
  .chip.on { border-color: rgba(52,211,153,.4); background: rgba(16,185,129,.1); color: #6ee7b7; }
  .chip.on .dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); }
  .ban { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 14px 0 6px; font-weight: 700; letter-spacing: .05em;
    background: rgba(0,0,0,.6); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
  .ban img { width: 20px; height: 20px; border-radius: 50%; }
  .ban.clean .src { color: #6ee7b7; } .ban.unknown .src { color: #d4d4d8; }
  .ban .st { font-weight: 500; color: #a1a1aa; }
  .ban.hit { background: rgba(60,0,0,.75); }
  .ban.hit .st { color: var(--red); font-weight: 900; text-shadow: 0 0 8px rgba(239,68,68,.95); }
  .who { display: flex; align-items: center; gap: 22px; margin-top: 20px; }
  .platoon { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 13px; color: var(--w55); }
  .platoon img { width: 24px; height: 24px; object-fit: contain; }
  .platoon .ok { color: rgba(252,211,77,.9); font-size: 12px; }
  h1 { margin: 0; font-family: "Oswald", "SC", "WenQuanYi Zen Hei", sans-serif; font-size: 42px; line-height: 1.2; font-weight: 700;
    letter-spacing: .02em; word-break: break-all; }
  h1 .tag { color: var(--w45); margin-right: 12px; }
  .meta { display: flex; align-items: center; gap: 16px; margin-top: 6px; font-size: 12px; color: var(--w55); }
  .meta span { display: inline-flex; align-items: center; gap: 6px; }
  .lv { font-family: "Oswald", sans-serif; font-size: 14px; font-weight: 700; padding: 0 6px; border: 1px solid; }
  .core { display: flex; align-items: flex-end; gap: 40px; margin-top: 26px; }
  .core .kd-t { font-size: 11px; letter-spacing: .25em; color: rgba(251,191,36,.9); }
  .core .kd { font-family: "Oswald", sans-serif; font-size: 92px; line-height: .95; font-weight: 700; color: var(--amber);
    text-shadow: 0 0 28px rgba(245,158,11,.35); margin-top: 4px; }
  .kpis { display: grid; grid-template-columns: repeat(4, auto); gap: 0 30px; padding-bottom: 6px; }
  .kpis .v { font-family: "Oswald", sans-serif; font-size: 28px; font-weight: 700; margin-top: 2px; }
  .row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
  .splits { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .split .track { display: flex; gap: 3px; height: 10px; margin-top: 8px; }
  .split .track i { display: block; }
  .split .ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--w80); }
  .split .ends em { font-style: normal; color: var(--w40); margin: 0 4px; }
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  .tiles .label { display: flex; align-items: center; gap: 6px; }
  .tiles .label .icon { color: var(--w40); }
  .tiles .v { font-family: "Oswald", sans-serif; font-size: 25px; font-weight: 700; margin-top: 2px; }
  .tiles .v.hot { color: var(--amber-soft); }
  .team-item { display: flex; align-items: center; gap: 16px; }
  .team-item + .team-item { margin-top: 26px; }
  .team-item .box { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex: none;
    border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); }
  .team-item .v { font-family: "Oswald", sans-serif; font-size: 25px; font-weight: 700; }
  .team-item .rate { margin-left: auto; font-size: 12px; color: var(--w45); }
  .cls-head, .cls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 70px 60px 42px 42px; gap: 0 12px; align-items: center; }
  .cls-head { padding: 0 6px 8px; font-size: 11px; color: var(--w40); }
  .cls-head span:nth-child(n+3), .cls .n { text-align: right; }
  .cls { padding: 6px; font-size: 13px; }
  .cls.best-row { background: rgba(245,158,11,.07); }
  .cls .pic { width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
  .cls .pic img { display: block; width: 100%; height: 180%; object-fit: cover; object-position: top; }
  .cls .top { display: flex; align-items: center; gap: 8px; }
  .cls .cname { font-weight: 600; font-size: 14px; }
  .cls.best-row .cname { color: var(--amber-soft); }
  .cls .badge { background: var(--amber); color: #000; font-size: 10px; font-weight: 700; line-height: 16px; padding: 0 4px; }
  .cls .share { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.5); }
  .cls .bar { margin-top: 6px; }
  .cls .bar i { background: rgba(255,255,255,.45); }
  .cls.best-row .bar i { background: var(--amber); }
  .cls .n { color: rgba(255,255,255,.85); font-family: "Oswald", sans-serif; font-variant-numeric: tabular-nums; }
  .gear + .gear { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  .gear-item { display: flex; align-items: center; gap: 12px; }
  .gear-item + .gear-item { margin-top: 12px; }
  .gear-item .img { width: 84px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
  .gear-item .img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 2px; }
  .gear-item .body { flex: 1; min-width: 0; }
  .gear-item .line { display: flex; align-items: baseline; gap: 8px; }
  .gear-item .name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gear-item .k { margin-left: auto; font-size: 13px; color: var(--w80); font-family: "Oswald", sans-serif; }
  .gear-item .bar { margin-top: 6px; }
  .empty { padding: 14px 0; text-align: center; font-size: 12px; color: var(--w40); }
{% endblock %}
{% block body %}
<section class="hero{{ ' banned' if banned }}">
  <img class="portrait" src="{{ portrait }}">
  <div class="best"><div class="t">最佳兵种</div><div class="v">{{ best_class }}</div></div>
  <div class="hero-body">
    {% if banned %}<div class="warn">该玩家已被 {{ banned_by }} 判定作弊</div>{% endif %}
    <div class="status">
      {% if online is none %}<span class="chip"><span class="dot"></span>状态未知</span>
      {% elif online %}<span class="chip on"><span class="dot"></span>{{ '正在游戏 · ' ~ online_server if online_server else '在线' }}</span>
      {% else %}<span class="chip"><span class="dot"></span>离线</span>{% endif %}
      {% for b in bans %}
      <span class="ban {{ b.state }}"><img src="{{ b.logo }}"><span class="src">{{ b.source }}</span>
        {%- if b.state == "hit" %}<span class="st">{{ b.hit_text }}</span>{% elif b.state == "unknown" %}<span class="st">无信息</span>{% endif %}</span>
      {% endfor %}
    </div>
    <div class="who">
      {{ avatar(avatar_url, online, 96) }}
      <div>
        {% if platoon %}
        <div class="platoon">
          {% if platoon.emblem_url %}<img src="{{ platoon.emblem_url }}">{% endif %}
          <span>{{ platoon.name or platoon.tag }}{% if platoon.size %} · {{ platoon.size }} 人{% endif %}</span>
          {% if platoon.verified %}<span class="ok">已认证</span>{% endif %}
        </div>
        {% endif %}
        <h1>{% if platoon and platoon.tag %}<span class="tag">[{{ platoon.tag }}]</span>{% endif %}{{ name }}</h1>
        <div class="meta">
          <span class="lv" style="color: {{ rank_color }}; border-color: {{ rank_color }}">Lv. {{ rank }}</span>
          <span>{{ icon("clock") }}{{ hours }}</span>
          <span class="d">PID {{ pid }}</span>
        </div>
      </div>
    </div>
    <div class="core">
      <div><div class="kd-t">K / D</div><div class="kd">{{ kd }}</div></div>
      <div class="kpis">
        {% for label, value in kpis %}<div><div class="label">{{ label }}</div><div class="v">{{ value }}</div></div>{% endfor %}
      </div>
    </div>
  </div>
</section>

<div class="row">
  <section class="panel">
    <div class="sh">战斗</div>
    <div class="splits">
      {% for s in splits %}
      <div class="split">
        <div class="label">{{ s.title }}</div>
        <div class="track"><i style="width: {{ s.pct }}%; background: {{ s.left_color }}"></i><i style="flex: 1; background: {{ s.right_color }}"></i></div>
        <div class="ends">
          <span>{{ s.left_label }} <b class="d">{{ s.left }}</b><em>{{ s.pct }}%</em></span>
          <span><em>{{ 100 - s.pct }}%</em>{{ s.right_label }} <b class="d">{{ s.right }}</b></span>
        </div>
      </div>
      {% endfor %}
    </div>
    <div class="tiles">
      {% for label, value, ico, hot in tiles %}
      <div><div class="label">{{ icon(ico) }}{{ label }}</div><div class="v{{ ' hot' if hot }}">{{ value }}</div></div>
      {% endfor %}
    </div>
  </section>
  <section class="panel">
    <div class="sh">团队贡献</div>
    {% for label, value, ico, rate in team %}
    <div class="team-item">
      <span class="box">{{ icon(ico, 20) }}</span>
      <div><div class="label">{{ label }}</div><div class="v">{{ value }}</div></div>
      <span class="rate">{{ rate }} / 小时</span>
    </div>
    {% endfor %}
  </section>
</div>

<div class="row">
  <section class="panel">
    <div class="sh">兵种<span class="aside">按游玩时长排序</span></div>
    <div class="cls-head"><span></span><span>兵种 · 时长占比</span><span>时长</span><span>击杀</span><span>KPM</span><span>SPM</span></div>
    {% for c in classes %}
    <div class="cls{{ ' best-row' if c.best }}">
      <div class="pic"><img src="{{ c.portrait }}"></div>
      <div>
        <div class="top"><span class="cname">{{ c.name }}</span>{% if c.best %}<span class="badge">最佳</span>{% endif %}<span class="share">{{ c.share }}</span></div>
        <div class="bar"><i style="width: {{ c.ratio }}%"></i></div>
      </div>
      <span class="n">{{ c.time }}</span><span class="n">{{ c.kills }}</span><span class="n">{{ c.kpm }}</span><span class="n">{{ c.spm }}</span>
    </div>
    {% endfor %}
  </section>
  <section class="panel">
    {% for title, items in gear %}
    <div class="gear">
      <div class="sh">{{ title }}</div>
      {% for g in items %}
      <div class="gear-item">
        <div class="img">{% if g.image %}<img src="{{ g.image }}">{% endif %}</div>
        <div class="body">
          <div class="line"><span class="name">{{ g.name }}</span><span class="k">{{ g.kills }}</span></div>
          <div class="bar"><i style="width: {{ g.ratio }}%"></i></div>
        </div>
      </div>
      {% else %}<div class="empty">暂无记录</div>{% endfor %}
    </div>
    {% endfor %}
  </section>
</div>
{% endblock %}