{% extends "base.html" %}
{% block title %}量化策略{% endblock %}
{% block page_title %}量化策略回测{% endblock %}
{% block content %}
<div class="card">
  <div class="pill-bar" id="strategyPills">
    <div class="loading">加载策略中…</div>
  </div>
  <div id="stratDesc" class="mb8" style="color:var(--text2);font-size:13px"></div>
  <div class="kpi-grid" id="stratSummary" style="margin-bottom:4px"></div>
</div>

<div class="grid grid-2-1 mt16">
  <div class="card">
    <div class="card-title"><span class="bar"></span>全市场回测榜 <span id="rankHint" style="font-weight:400;color:var(--muted);font-size:12px"></span></div>
    <div style="overflow:auto;max-height:560px">
      <table>
        <thead><tr>
          <th>排名</th><th>股票</th><th>策略收益</th><th>基准</th><th>超额</th>
          <th>最大回撤</th><th>夏普</th><th>胜率</th><th>盈亏比</th><th>交易</th>
        </tr></thead>
        <tbody id="rankTb"></tbody>
      </table>
    </div>
  </div>
  <div class="card">
    <div class="card-title"><span class="bar" style="background:var(--gold)"></span>单股回测详情</div>
    <div class="input-group mb8">
      <select class="input" id="btStock" style="flex:1"></select>
    </div>
    <div id="btHead"></div>
    <div id="equityChart" style="height:220px"></div>
    <div id="btMetrics" class="kpi-grid" style="margin-top:12px"></div>
    <div class="card-title mt16" style="font-size:14px"><span class="bar" style="background:var(--cyan)"></span>交易明细</div>
    <div id="tradeBox" style="overflow:auto;max-height:220px"></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/strategies.js') }}"></script>
{% endblock %}