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

{% block content %}

{% for pg in product_groups %}
<div style="margin-bottom:24px;border:1px solid var(--border);border-radius:10px;overflow:hidden;">
  <div class="product-header"
       style="display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--th-bg);cursor:pointer;user-select:none;"
       onclick="toggleProduct(this)">
    <span class="collapse-arrow" style="font-size:0.75rem;transition:transform .2s;display:inline-block;transform:rotate(0deg);">▼</span>
    <strong style="font-size:0.92rem;">{{ pg.code }} · {{ pg.name }}</strong>
    <span style="font-size:0.78rem;color:var(--sub);">{{ pg.exchange }}</span>
    <span style="font-size:0.78rem;color:var(--sub);margin-left:8px;">{{ pg.contracts|length }} 合约</span>
  </div>
  <div class="product-body">
    <table>
      <tr><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>
        {% else %}
        <td colspan="6" class="na">暂无数据</td>
        {% endif %}
        <td><a href="/contracts/{{ c }}" style="color:var(--accent);text-decoration:none;">详情 →</a></td>
      </tr>
      {% endfor %}
    </table>
  </div>
</div>
{% endfor %}

<script>
function toggleProduct(header) {
  var body = header.nextElementSibling;
  var arrow = header.querySelector('.collapse-arrow');
  if (body.style.display === 'none') {
    body.style.display = 'block';
    arrow.style.transform = 'rotate(0deg)';
  } else {
    body.style.display = 'none';
    arrow.style.transform = 'rotate(-90deg)';
  }
}
</script>
{% endblock %}