{% extends "_base.html" %}
{% from "_macros.html" import icon, avatar %}
{#- 内容对照 bf-manager 网页的 PlayerHeroBanner 与 CareerOverview，排版改成整宽纵向，方便手机看。 -#}
{% block style %}
  .hero { position: relative; overflow: hidden; min-height: 400px; background: var(--panel);
    clip-path: polygon(0 26px, 26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
  .hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--amber-deep), rgba(245,158,11,.2) 60%, transparent); }
  .hero.banned::after { background: linear-gradient(90deg, var(--red), rgba(239,68,68,.3) 60%, transparent); }
  .portrait { position: absolute; right: 10px; bottom: 0; height: 400px; opacity: .95; }
  .hero.banned .portrait, .hero.banned .who { filter: grayscale(1); }
  .best { position: absolute; right: 28px; bottom: 22px; z-index: 1; text-align: right;
    padding: 8px 14px; background: rgba(0,0,0,.65); }
  .best .t { font-size: 17px; color: var(--muted); }
  .best .v { font-size: 30px; font-weight: 700; }
  .hero-body { position: relative; z-index: 1; padding: 28px 330px 30px 30px; }
  .warn { margin-bottom: 16px; padding: 8px 16px; background: #b91c1c; font-weight: 700; font-size: 20px; }
  .status { display: flex; flex-wrap: wrap; gap: 10px; font-size: 18px; }
  .chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: rgba(255,255,255,.1); color: var(--soft); }
  .chip .dot { width: 10px; height: 10px; border-radius: 50%; background: #a1a1aa; }
  .chip.on { background: rgba(16,185,129,.22); color: #a7f3d0; }
  .chip.on .dot { background: #34d399; }
  .ban { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; font-weight: 700; background: rgba(255,255,255,.1); }
  .ban img { width: 26px; height: 26px; border-radius: 50%; }
  .ban.clean .src { color: #6ee7b7; }
  .ban .st { font-weight: 400; color: var(--muted); }
  .ban.hit { background: rgba(185,28,28,.55); }
  .ban.hit .st { color: #fecaca; font-weight: 900; }
  .who { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
  .platoon { display: flex; align-items: center; gap: 10px; font-size: 19px; color: var(--soft); }
  .platoon img { width: 32px; height: 32px; object-fit: contain; }
  .platoon .ok { color: var(--amber); font-size: 17px; }
  h1 { margin: 0; font-family: "Oswald", "SC", "WenQuanYi Zen Hei", sans-serif; font-size: 50px; line-height: 1.15; font-weight: 700; word-break: break-all; }
  h1 .tag { color: var(--muted); margin-right: 12px; }
  .meta { display: flex; align-items: center; gap: 18px; margin-top: 6px; font-size: 19px; color: var(--soft); }
  .meta span { display: inline-flex; align-items: center; gap: 6px; }
  .lv { font-family: "Oswald", sans-serif; font-size: 20px; font-weight: 700; padding: 0 8px; border: 2px solid; }
  .core { display: flex; align-items: flex-end; gap: 36px; margin-top: 24px; }
  .core .kd-t { font-size: 18px; color: var(--amber); letter-spacing: .1em; }
  .core .kd { font-family: "Oswald", sans-serif; font-size: 104px; line-height: .95; font-weight: 700; color: var(--amber); margin-top: 4px; }
  .kpis { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 36px; padding-bottom: 4px; }
  .kpis .v { font-family: "Oswald", sans-serif; font-size: 36px; font-weight: 700; line-height: 1.15; }
  section.panel { margin-top: 18px; }
  .splits { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
  .split .track { display: flex; gap: 4px; height: 14px; margin-top: 10px; }
  .split .track i { display: block; }
  .split .ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 19px; color: var(--soft); }
  .split .ends b { font-family: "Oswald", sans-serif; font-size: 22px; margin-left: 4px; }
  .split .ends em { font-style: normal; color: var(--muted); margin: 0 6px; }
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
  .tiles .label { display: flex; align-items: center; gap: 8px; }
  .tiles .v { font-family: "Oswald", sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; }
  .tiles .v.hot { color: var(--amber-soft); }
  .tiles .rate { font-size: 17px; color: var(--muted); margin-left: 8px; font-family: "SC", sans-serif; font-weight: 400; }
  .classes { padding: 18px 22px; }
  .classes .sh { font-size: 22px; margin-bottom: 10px; }
  .cls { display: grid; grid-template-columns: 40px minmax(0, 1fr) 130px 110px 80px; gap: 0 14px; align-items: center;
    padding: 4px 6px; font-size: 19px; color: var(--soft); }
  .cls.head { font-size: 16px; color: var(--muted); padding-bottom: 6px; }
  .cls.head span:nth-child(n+3), .cls .n { text-align: right; }
  .cls.row { border-top: 1px solid var(--line); }
  .cls.best-row { color: var(--amber-soft); }
  .cls .pic { width: 40px; height: 40px; overflow: hidden; background: rgba(255,255,255,.08); }
  .cls .pic img { display: block; width: 100%; height: 180%; object-fit: cover; object-position: top; }
  .cls .badge { margin-left: 8px; background: var(--amber); color: #000; font-size: 14px; font-weight: 700; line-height: 20px; padding: 0 5px; vertical-align: 2px; }
  .cls .share { margin-left: 8px; font-size: 16px; color: var(--muted); }
  .cls .n { font-family: "Oswald", sans-serif; font-size: 20px; }
  .gear-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
  .gear-row .panel { margin: 0; }
  .gear-item + .gear-item { margin-top: 16px; }
  .gear-item .line { display: flex; align-items: center; gap: 14px; }
  .gear-item .img { width: 176px; height: 78px; flex: none; display: flex; align-items: center; justify-content: center;
    background: #7e7e84; }
  .gear-item .img img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
  .gear-item .body { flex: 1; min-width: 0; }
  .gear-item .name { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gear-item .k { font-family: "Oswald", sans-serif; font-size: 24px; font-weight: 700; color: var(--amber); }
  .gear-item .k small { font-family: "SC", sans-serif; font-size: 17px; color: var(--muted); font-weight: 400; margin-left: 4px; }
  .gear-item .bar { margin-top: 6px; height: 6px; }
  .empty { padding: 18px 0; text-align: center; font-size: 18px; color: var(--muted); }
{% 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, 108) }}
      <div style="min-width: 0">
        {% 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>
        </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>

<section class="panel">
  <div class="sh">战斗<span class="aside d">PID {{ pid }}</span></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>{{ s.left }}</b><em>{{ s.pct }}%</em></span>
        <span><em>{{ 100 - s.pct }}%</em>{{ s.right_label }}<b>{{ 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 %}
    {% for label, value, ico, rate in team %}
    <div><div class="label">{{ icon(ico) }}{{ label }}</div><div class="v">{{ value }}<span class="rate">{{ rate }}/时</span></div></div>
    {% endfor %}
  </div>
</section>

<div class="gear-row">
  {% for title, items in gear %}
  <section class="panel">
    <div class="sh">{{ title }}</div>
    {% for g in items %}
    <div class="gear-item">
      <div class="line">
        <div class="img">{% if g.image %}<img src="{{ g.image }}">{% endif %}</div>
        <div class="body">
          <div class="name">{{ g.name }}</div>
          <div class="k">{{ g.kills }}<small>击杀</small></div>
        </div>
      </div>
      <div class="bar"><i style="width: {{ g.ratio }}%"></i></div>
    </div>
    {% else %}<div class="empty">暂无记录</div>{% endfor %}
  </section>
  {% endfor %}
</div>

<section class="panel classes">
  <div class="sh">兵种<span class="aside">按游玩时长排序</span></div>
  <div class="cls head"><span></span><span>兵种 · 时长占比</span><span>时长</span><span>击杀</span><span>KPM</span></div>
  {% for c in classes %}
  <div class="cls row{{ ' best-row' if c.best }}">
    <div class="pic"><img src="{{ c.portrait }}"></div>
    <span>{{ c.name }}{% if c.best %}<span class="badge">最佳</span>{% endif %}<span class="share">{{ c.share }}</span></span>
    <span class="n">{{ c.time }}</span><span class="n">{{ c.kills }}</span><span class="n">{{ c.kpm }}</span>
  </div>
  {% endfor %}
</section>
{% endblock %}