{% extends "base.html" %}
{% block title %}行情数据{% endblock %}
{% block heading %}行情数据{% endblock %}
{% block breadcrumb %}<a href="/contracts/">合约总览</a>{% endblock %}

{% block content %}

{% set active_product = request.query_params.get('product', product_groups[0].code if product_groups else '') %}

<style>
  .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
  .tab-btn {
    padding: 10px 20px; border: none; background: none;
    font-size: 0.88rem; font-weight: 500; color: var(--sub);
    cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: color .12s, border-color .12s;
  }
  .tab-btn:hover { color: var(--fg); }
  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
</style>

<div class="tabs">
  {% for pg in product_groups %}
  <a href="/contracts/?product={{ pg.code }}" class="tab-btn{% if active_product == pg.code %} active{% endif %}">
    {{ pg.code }} · {{ pg.name }}
  </a>
  {% endfor %}
</div>

{% for pg in product_groups %}
{% if pg.code == active_product %}
<div class="table-wrap">
<table>
  <tr><th>合约</th><th>日期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>振幅</th><th>次日振幅</th><th>操作</th></tr>
  {% for c in pg.contracts %}
  <tr>
    <td><strong>{{ c }}</strong></td>
    {% if c in contract_bars %}
    <td>{{ contract_bars[c].date }}</td>
    <td>{{ contract_bars[c].open|int }}</td>
    <td>{{ contract_bars[c].close|int }}</td>
    <td>{{ contract_bars[c].high|int }}</td>
    <td>{{ contract_bars[c].low|int }}</td>
    <td>
      {% if contract_bars[c].amp_5d %}
      <span class="badge badge-up">{{ contract_bars[c].amp_5d|int }}</span>
      {% else %}
      <span class="na">—</span>
      {% endif %}
    </td>
    <td>
      {% if c in contract_next_amp %}
      <span class="badge badge-warn">{{ contract_next_amp[c] }}</span>
      {% else %}
      <span class="na">—</span>
      {% endif %}
    </td>
    {% else %}
    <td colspan="7" class="na">暂无数据</td>
    {% endif %}
    <td><a href="/contracts/{{ c }}" style="color:var(--accent);text-decoration:none;">详情 →</a></td>
  </tr>
  {% endfor %}
</table>
</div>
{% endif %}
{% endfor %}

{% endblock %}