{% extends "base.html" %}
{% block title %}复盘 #{{ trade.id }} · {{ app_name }}{% endblock %}
{% block content %}
<p><a href="{{ url_for('records_page') }}">← 返回列表</a></p>
<h2 style="margin:8px 0 14px">复盘 #{{ trade.id }} · {{ trade.symbol }} · {{ trade.side }}</h2>

<div class="grid cols-2">
  <div class="card">
    <h3>成交信息</h3>
    <table>
      <tr><th>账户</th><td>{{ trade.account_name or '—' }}</td></tr>
      <tr><th>机器</th><td>{{ trade.machine_name or '—' }}</td></tr>
      <tr><th>手数</th><td>{{ trade.volume }}</td></tr>
      <tr><th>开仓价</th><td>{{ trade.open_price }}</td></tr>
      <tr><th>平仓价</th><td>{{ trade.close_price if trade.close_price is not none else '—' }}</td></tr>
      <tr><th>开仓时间</th><td>{{ trade.open_time_fmt }} <span class="muted">北京时间</span></td></tr>
      <tr><th>平仓时间</th><td>{{ trade.close_time_fmt }} <span class="muted">北京时间</span></td></tr>
      <tr><th>持仓时间</th><td style="font-weight:700;color:var(--accent)">{{ trade.hold_duration }}</td></tr>
      <tr><th>盈亏</th><td>{{ trade.profit }}</td></tr>
      <tr><th>SL / TP</th><td>{{ trade.sl }} / {{ trade.tp }}</td></tr>
      <tr><th>单号</th><td>{{ trade.ticket or '—' }}</td></tr>
    </table>
  </div>
  <div class="card">
    <h3>入场形式标注</h3>
    <form method="post" action="{{ url_for('record_annotate', tid=trade.id) }}">
      <div class="form-row">
        <label>入场形式</label>
        <select name="entry_style">
          {% set styles = ['', 'M15关键位+M1强吞没', '回撤接力', '突破延续', '逆势试错', '其它'] %}
          {% for s in styles %}
          <option value="{{ s }}" {% if trade.entry_style==s %}selected{% endif %}>{{ s or '（未选）' }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-row">
        <label>复盘备注</label>
        <textarea name="review_note" rows="5" placeholder="位不对 / 形不对 / 出场违纪 …">{{ trade.review_note or '' }}</textarea>
      </div>
      <button class="btn" type="submit">保存标注</button>
    </form>
  </div>
</div>

<div class="card" style="margin-top:14px">
  <h3>四周期 K 线（M1 / M5 / M15 / H1）</h3>
  <p class="muted">数据来自服务器缓存；由已激活客户端通过 API 上报 bars。无数据时显示占位。</p>
  <div class="chart-grid" style="margin-top:10px">
    {% for tf in ['M1','M5','M15','H1'] %}
    <div class="chart-box">
      <h4>{{ tf }} · {{ charts[tf]|length }} 根</h4>
      {% if charts[tf] %}
      <canvas class="chart-canvas" id="chart-{{ tf }}"
              data-bars='{{ charts[tf]|tojson }}'></canvas>
      {% else %}
      <div class="empty-chart">暂无 {{ tf }} K 线缓存</div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
{% endblock %}