{% extends "_base.html" %}
{#- 交换：按稀有度分组的网格，配色同网页交换页和皮肤稀有度。 -#}
{% block style %}
  .head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
  .head h1 { margin: 4px 0 0; font-size: 44px; line-height: 1.2; }
  .head .when { margin-left: auto; text-align: right; font-size: 19px; line-height: 1.6; color: var(--muted); }
  .head .when b { font-family: "Oswald", "SC", sans-serif; font-size: 26px; font-weight: 600; color: var(--text); }
  .stale { margin-bottom: 18px; padding: 16px 22px; background: rgba(120, 53, 15, .92); border-left: 5px solid var(--amber);
    font-size: 19px; line-height: 1.6; color: var(--amber-soft); }
  .group { margin-bottom: 18px; }
  .group .sh { margin-bottom: 14px; }
  .group.gold .sh::before { background: var(--gold); } .group.blue .sh::before { background: var(--blue); } .group.white .sh::before { background: #bbb; }
  .grid { display: grid; grid-template-columns: repeat({{ cols }}, minmax(0, 1fr)); gap: 14px; }
  .tile { background: var(--panel); display: flex; flex-direction: column; border-top: 4px solid var(--edge);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
  .gold .tile { --edge: var(--gold); } .blue .tile { --edge: var(--blue); } .white .tile { --edge: rgba(255,255,255,.3); }
  .pic { height: 112px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; background: #4a4a50; }
  .pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .info { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .info .n { font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .info .p { font-size: 17px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .info .c { margin-top: 6px; font-family: "Oswald", "SC", sans-serif; font-size: 22px; font-weight: 600; color: var(--amber); }
  .info .c small { font-family: "SC", sans-serif; font-size: 16px; font-weight: 400; color: var(--muted); margin-left: 4px; }
{% endblock %}
{% block body %}
<section class="panel head">
  <div>
    <div class="eyebrow">Battlefield 1 · Scrap Exchange</div>
    <h1>交换{{ " · 当期" if latest else " · 历史" }}</h1>
  </div>
  <div class="when">
    <div><b>{{ start }}</b>{% if until %} ~ <b>{{ until }}</b>{% else %} 起{% endif %}</div>
    <div>{% if number %}第 {{ number }} / {{ total }} 期 · {% endif %}共 {{ count }} 件 · 北京时间</div>
  </div>
</section>
{% if stale %}<div class="stale">这一期从 {{ start }} 起已经 {{ stale }} 天没换过：bf-manager 每小时检查一次，之后 EA 就没再更新交换，游戏里一直是这一期。</div>{% endif %}
{% for g in groups %}
<section class="group {{ g.color }}">
  <h2 class="sh">{{ g.label }}<span class="aside">{{ g.tiles|length }} 件</span></h2>
  <div class="grid">
    {% for i in g.tiles %}
    <div class="tile">
      <div class="pic">{% if i.image %}<img src="{{ i.image }}">{% endif %}</div>
      <div class="info">
        <div class="n rarity-{{ g.color }}">{{ i.name }}</div>
        <div class="p">{{ i.parent }}</div>
        <div class="c">{{ i.price }}<small>废料</small></div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>
{% endfor %}
{% endblock %}