{# OKX 期权复盘:交易记录 → 复盘表单 → 复盘记录 → 统计 #}
<div class="options-review-wrap" id="options-review-root" style="grid-column:1/-1">
    {% if not options_enabled %}
    <div class="flash" style="margin-bottom:12px;font-size:.82rem">期权未启用:请设置 <code>OKX_OPTIONS_ENABLED=true</code> 后重启.</div>
    {% endif %}

    <style>
        .options-review-wrap{font-size:.82rem;display:flex;flex-direction:column;gap:14px}
        .options-review-wrap h2,.options-review-wrap h3{margin:0}
        .or-page-head{
          display:flex;align-items:center;gap:10px;flex-wrap:wrap;
          padding:2px 2px 0;
        }
        .or-page-head h2{font-size:1.05rem;font-weight:650;margin-right:auto;letter-spacing:.02em}
        .or-section{
          margin:0;padding:14px 16px 16px;
          border:1px solid var(--or-border, rgba(127,127,127,.28));
          border-radius:12px;
          background:var(--or-section-bg, rgba(18,23,38,.55));
          box-shadow:var(--or-section-shadow, 0 1px 0 rgba(255,255,255,.03) inset);
          color:var(--or-text, inherit);
        }
        .or-section-head{
          display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
          margin-bottom:12px;padding-bottom:10px;
          border-bottom:1px solid var(--or-border-soft, rgba(127,127,127,.22));
        }
        .or-section-head > div{min-width:0;flex:1}
        .or-step{
          flex-shrink:0;width:1.55rem;height:1.55rem;border-radius:999px;
          display:inline-flex;align-items:center;justify-content:center;
          font-size:.72rem;font-weight:700;
          background:var(--or-accent-bg, rgba(99,102,241,.28));
          color:var(--or-accent-fg, #c7c9ff);
          border:1px solid var(--or-accent-border, rgba(129,140,248,.45));
        }
        .or-section-title{font-size:.95rem;font-weight:650;line-height:1.3;color:var(--or-title, inherit)}
        .or-section-desc{margin:4px 0 0;font-size:.72rem;opacity:.72;line-height:1.45;color:var(--or-muted, inherit)}
        .or-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
        .or-toolbar{display:flex;flex-direction:column;gap:0;margin:0}
        .or-tab{
          border:1px solid var(--or-border, rgba(127,127,127,.35));background:transparent;color:inherit;
          padding:6px 12px;border-radius:8px;cursor:pointer;font-size:.78rem;
        }
        .or-tab.active{
          background:var(--or-accent-bg, rgba(99,102,241,.28));
          border-color:var(--or-accent-border, rgba(129,140,248,.55));
          color:var(--or-accent-fg, #e8e9ff);font-weight:600;
        }
        .or-filters{
          display:flex;flex-wrap:wrap;gap:8px;align-items:center;
          margin:0;padding:10px 12px;border-radius:10px;
          background:var(--or-filters-bg, rgba(0,0,0,.22));
          border:1px solid var(--or-border-soft, rgba(127,127,127,.18));
        }
        .or-filters select,.or-filters input[type="search"],.or-filters input[type="datetime-local"]{
          font-size:.76rem;min-height:2rem;
        }
        .or-filters #or-filter-q{max-width:168px}
        .or-filters label{display:flex;align-items:center;gap:5px;font-size:.72rem;opacity:.85}
        .or-badge{
          display:inline-block;padding:1px 7px;border-radius:999px;
          background:var(--or-badge-bg, rgba(127,127,127,.22));font-size:.7rem;vertical-align:middle;
        }
        .or-list-title{display:none}
        .or-trades-table,.or-reviewed-table{font-size:.78rem}
        .or-trades-table tr.or-row-active{
          outline:1px solid var(--or-accent-border, rgba(129,140,248,.55));
          background:var(--or-row-active-bg, rgba(99,102,241,.1));
        }
        .or-reviewed-table tbody tr{cursor:pointer}
        .or-reviewed-table tbody tr:hover{background:var(--or-row-hover-bg, rgba(99,102,241,.08))}
        .or-pager{
          display:flex;align-items:center;gap:8px;margin-top:10px;
          padding-top:8px;border-top:1px dashed var(--or-border-soft, rgba(127,127,127,.2));font-size:.74rem;
        }
        .or-list-loading{opacity:.55;pointer-events:none;transition:opacity .12s ease}
        .or-trades-table-wrap,.or-reviewed-table-wrap{min-height:9.5rem;overflow-x:auto}
        .or-reviewed-table{min-width:980px}
        .or-kpi-row{
          display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
          gap:8px;margin-bottom:12px;
        }
        .or-kpi-tile{
          border:1px solid var(--or-border-soft, rgba(127,127,127,.22));border-radius:10px;
          padding:10px 12px;background:var(--or-tile-bg, rgba(0,0,0,.2));min-width:0;
        }
        .or-kpi-label{font-size:.7rem;opacity:.7;margin-bottom:4px}
        .or-kpi-value{font-size:.95rem;font-weight:650;letter-spacing:.01em;word-break:break-all}
        .or-stats-grid{
          display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;
        }
        .or-stat-card{
          border:1px solid var(--or-border-soft, rgba(127,127,127,.22));border-radius:10px;
          padding:10px 12px;background:var(--or-tile-bg, rgba(0,0,0,.16));font-size:.76rem;
        }
        .or-stat-card-title{
          font-weight:650;margin-bottom:8px;font-size:.78rem;
          padding-bottom:6px;border-bottom:1px solid var(--or-border-soft, rgba(127,127,127,.18));
        }
        .or-stat-row{
          display:flex;justify-content:space-between;align-items:baseline;gap:10px;
          padding:5px 0;border-bottom:1px solid var(--or-border-faint, rgba(127,127,127,.1));
        }
        .or-stat-row:last-child{border-bottom:none;padding-bottom:0}
        .or-stat-key{opacity:.9;min-width:0;overflow:hidden;text-overflow:ellipsis}
        .or-stat-val{flex-shrink:0;font-variant-numeric:tabular-nums;opacity:.85}
        .or-journal-card{font-size:.78rem}
        .or-journal-card h2{font-size:.92rem}
        .or-journal-card input,
        .or-journal-card select,
        .or-journal-card textarea,
        .or-journal-card button{font-size:.76rem}
        .or-journal-card .or-form-grid,
        .or-journal-card .or-form-grid2{
          display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-bottom:6px;
        }
        .or-journal-card .or-mood-grid{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0;font-size:.74rem}
        .or-journal-card .muted,.or-journal-card .sub{font-size:.7rem}
        .or-journal-card.hidden{display:none!important}
        .or-detail-backdrop{
          position:fixed;inset:0;z-index:1300;
          display:flex;align-items:center;justify-content:center;
          padding:16px;background:var(--or-backdrop, rgba(0,0,0,.72));
        }
        .or-detail-backdrop[hidden]{display:none!important}
        .or-img-lightbox{
          position:fixed;inset:0;z-index:2200;
          display:flex;align-items:center;justify-content:center;
          padding:16px;background:rgba(0,0,0,.86);cursor:zoom-out;
        }
        .or-img-lightbox[hidden]{display:none!important}
        .or-img-lightbox img{
          max-width:min(96vw,1200px);max-height:92vh;
          object-fit:contain;border-radius:8px;
          box-shadow:0 12px 40px rgba(0,0,0,.55);
        }
        .or-detail-modal{
          width:min(96vw,920px);max-height:90vh;overflow:auto;
          background:var(--or-modal-bg, var(--card-bg, #121726));color:var(--or-text, inherit);
          border:1px solid var(--or-border, rgba(127,127,127,.35));border-radius:10px;
          padding:14px 16px 18px;box-shadow:var(--or-modal-shadow, 0 12px 40px rgba(0,0,0,.45));
        }
        .or-detail-modal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
        .or-detail-modal-head h3{margin:0;margin-right:auto;font-size:.95rem;color:var(--or-title, inherit)}
        .or-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px 12px;font-size:.76rem;margin-bottom:8px}
        .or-detail-images{
          display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
          gap:10px;margin:10px 0 4px;
        }
        .or-detail-img-cell{
          min-width:0;border:1px solid var(--or-border-soft, rgba(127,127,127,.25));border-radius:8px;
          padding:8px;display:flex;flex-direction:column;gap:6px;
          background:var(--or-tile-bg, rgba(0,0,0,.18));
        }
        .or-detail-img-label{font-size:.72rem;opacity:.85;font-weight:600}
        .or-detail-img-thumb{
          width:100%;max-height:280px;object-fit:contain;
          border-radius:6px;cursor:zoom-in;background:var(--or-img-bg, rgba(0,0,0,.25));
        }
        .or-detail-img-miss{
          min-height:120px;display:flex;align-items:center;justify-content:center;
          font-size:.72rem;opacity:.65;border-radius:6px;background:rgba(127,127,127,.12);
        }
        .or-slot-thumb{
          display:block;margin-top:6px;max-width:160px;max-height:90px;
          object-fit:contain;border-radius:4px;border:1px solid var(--or-border, rgba(127,127,127,.3));
          background:var(--or-img-bg, rgba(0,0,0,.2));cursor:zoom-in;
        }
        @media (max-width:900px){
          .or-kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}
        }
        @media (max-width:640px){
          .or-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
          .or-detail-images{grid-template-columns:1fr}
          .or-detail-img-thumb{max-height:220px}
        }
    </style>

    <div class="or-page-head">
        <h2>期权复盘</h2>
        <span class="muted" id="or-sync-status" style="font-size:.72rem"></span>
        <button type="button" class="btn-secondary" id="or-reload-btn" style="font-size:.76rem;padding:4px 10px">刷新</button>
    </div>

    {# Tab + 筛选:放在各内容卡片上方,全局作用于下方列表/统计 #}
    <div class="or-toolbar">
        <div class="or-tabs" role="tablist" aria-label="复盘分类">
            <button type="button" class="or-tab active" data-source="option_spot" role="tab">期权交易记录</button>
            <button type="button" class="or-tab" data-source="options_options" role="tab">期期对冲记录</button>
            <button type="button" class="or-tab" data-source="perp_options" role="tab">永期对冲记录</button>
        </div>
        <div class="or-filters">
            <select id="or-filter-uly" autocomplete="off">
                <option value="">标的:全部</option>
                <option value="ETH">ETH</option>
                <option value="BTC">BTC</option>
            </select>
            <select id="or-filter-opt" autocomplete="off">
                <option value="">Call/Put:全部</option>
                <option value="C">Call</option>
                <option value="P">Put</option>
            </select>
            <input type="text" name="username" autocomplete="username" tabindex="-1" aria-hidden="true"
                   style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0" value="">
            <input type="search" id="or-filter-q" name="or_filter_q" placeholder="搜索标的/合约/策略"
                   autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                   data-lpignore="true" data-1p-ignore="true" data-form-type="other" readonly>
            <input type="datetime-local" id="or-filter-from" title="平仓起" autocomplete="off">
            <input type="datetime-local" id="or-filter-to" title="平仓止" autocomplete="off">
            <label class="muted">
                <input type="checkbox" id="or-include-hedge-legs"> 含已归属对冲的期权腿
            </label>
        </div>
    </div>

    {# 1. 交易记录 #}
    <section class="or-section" aria-labelledby="or-list-title">
        <div class="or-section-head">
            <span class="or-step" aria-hidden="true">1</span>
            <div>
                <div class="or-section-title" id="or-list-title">期权交易记录</div>
                <p class="or-section-desc">点「复盘」填写表单；已复盘仍保留在此，也可在下方查看详情。</p>
            </div>
        </div>
        <div class="options-strike-table-wrap or-trades-table-wrap" id="or-trades-wrap">
            <table class="options-strike-table or-trades-table" id="or-trades-table">
                <thead>
                    <tr>
                        <th>类型</th>
                        <th>标的/合约</th>
                        <th>盈亏</th>
                        <th>开仓时间</th>
                        <th>平仓时间</th>
                        <th>持有</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="or-trades-tbody">
                    <tr><td colspan="7" class="muted">加载中…</td></tr>
                </tbody>
            </table>
        </div>
        <div class="or-pager" id="or-trades-pager">
            <button type="button" class="btn-secondary" id="or-trades-prev" style="font-size:.72rem;padding:2px 8px">上一页</button>
            <span class="muted" id="or-trades-page-label">第 1 / 1 页</span>
            <button type="button" class="btn-secondary" id="or-trades-next" style="font-size:.72rem;padding:2px 8px">下一页</button>
        </div>
    </section>

    {# 2. 复盘上传(默认隐藏) #}
    <section class="or-section journal-card or-journal-card hidden" id="or-journal-card">
        <div class="or-section-head">
            <span class="or-step" aria-hidden="true">✎</span>
            <div>
                <div class="or-section-title">填写复盘</div>
                <p class="or-section-desc" id="or-journal-summary">截图槽位 5m / 15m / 1h / 4h，选文件后即时上传。</p>
            </div>
        </div>
        <div class="or-journal-body">
        <form id="or-journal-form" onsubmit="return false;">
            <input type="hidden" id="or-trade-id" value="">
            <input type="hidden" id="or-draft-id" value="">
            <div class="or-form-grid">
                <input type="datetime-local" id="or-f-open" title="开仓时间" autocomplete="off">
                <input type="datetime-local" id="or-f-close" title="平仓时间" autocomplete="off">
                <input type="text" id="or-f-coin" name="or_f_coin" placeholder="标的(如 ETH)"
                       autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                       data-lpignore="true" data-1p-ignore="true" data-form-type="other">
                <input type="text" id="or-f-inst" name="or_f_inst" placeholder="合约/计划"
                       autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                       data-lpignore="true" data-1p-ignore="true" data-form-type="other">
                <input type="text" id="or-f-pnl" name="or_f_pnl" placeholder="盈亏(U)"
                       autocomplete="off" inputmode="decimal" data-lpignore="true" data-1p-ignore="true" data-form-type="other">
                <input type="text" id="or-f-hold" name="or_f_hold" placeholder="持有时长" readonly autocomplete="off">
            </div>
            <div class="or-form-grid2">
                <select id="or-f-strategy" title="策略标签" required>
                    <option value="">策略标签</option>
                </select>
                <select id="or-f-direction" title="方向判断">
                    <option value="">方向判断</option>
                </select>
                <select id="or-f-exit" title="离场原因">
                    <option value="">离场原因</option>
                    <option value="止盈">止盈</option>
                    <option value="止损">止损</option>
                    <option value="到期">到期</option>
                    <option value="目标价">目标价</option>
                    <option value="手动平仓">手动平仓</option>
                    <option value="其他">其他</option>
                </select>
                <select id="or-f-followed" title="是否按计划">
                    <option value="">是否按计划</option>
                    <option value="是">是</option>
                    <option value="否">否</option>
                    <option value="部分">部分</option>
                </select>
                <select id="or-f-result" title="结果标签">
                    <option value="">结果标签</option>
                    <option value="盈利">盈利</option>
                    <option value="亏损">亏损</option>
                    <option value="持平">持平</option>
                </select>
            </div>
            <select id="or-f-entry" title="入场逻辑" style="width:100%;margin-bottom:6px;box-sizing:border-box">
                <option value="">入场逻辑</option>
            </select>

            <div class="journal-upload-slots" id="or-upload-slots">
                {% for tf in ['5m', '15m', '1h', '4h'] %}
                <div class="journal-upload-row" data-tf="{{ tf }}">
                    <span class="journal-upload-slot-label">{{ tf }}</span>
                    <input type="file" accept="image/*" class="or-upload-input" data-tf="{{ tf }}">
                    <input type="hidden" class="or-upload-hidden" data-tf="{{ tf }}" value="">
                    <span class="journal-upload-status or-upload-status" data-tf="{{ tf }}" aria-live="polite"></span>
                </div>
                {% endfor %}
            </div>
            <p class="sub journal-upload-hint">可只传部分周期;选文件后即时上传</p>

            <div class="or-mood-grid mood-grid">
                <label><input type="checkbox" class="or-mood" value="怕踏空">怕踏空</label>
                <label><input type="checkbox" class="or-mood" value="报复开仓">报复开仓</label>
                <label><input type="checkbox" class="or-mood" value="盈利飘了">盈利飘了</label>
                <label><input type="checkbox" class="or-mood" value="拿不住单">拿不住单</label>
                <label><input type="checkbox" class="or-mood" value="扛单">扛单</label>
                <label><input type="checkbox" class="or-mood" value="重仓违规">重仓违规</label>
            </div>
            <textarea id="or-f-note" rows="2" placeholder="备注" style="width:100%;box-sizing:border-box"></textarea>
            <div class="form-row" style="margin-top:8px;gap:6px">
                <button type="button" class="btn" id="or-save-btn">保存复盘记录</button>
                <button type="button" class="btn-secondary" id="or-clear-btn">取消</button>
                <button type="button" class="btn-secondary" id="or-del-btn">删除复盘内容</button>
                <span class="muted" id="or-save-status"></span>
            </div>
            <div id="or-legs-host" style="margin-top:10px;font-size:.74rem"></div>
        </form>
        </div>
    </section>

    {# 3. 已复盘记录 #}
    <section class="or-section" aria-labelledby="or-reviewed-heading">
        <div class="or-section-head">
            <span class="or-step" aria-hidden="true">2</span>
            <div>
                <div class="or-section-title" id="or-reviewed-heading">复盘记录</div>
                <p class="or-section-desc">已保存的复盘内容，点一行查看详情与截图。</p>
            </div>
        </div>
        <div class="options-strike-table-wrap or-reviewed-table-wrap" id="or-reviewed-wrap">
            <table class="options-strike-table or-reviewed-table" id="or-reviewed-table">
                <thead>
                    <tr>
                        <th>类型</th>
                        <th>标的/合约</th>
                        <th>方向</th>
                        <th>盈亏</th>
                        <th>开仓时间</th>
                        <th>平仓时间</th>
                        <th>持仓时长</th>
                        <th>策略</th>
                        <th>入场逻辑</th>
                        <th>结果</th>
                        <th>复盘时间</th>
                    </tr>
                </thead>
                <tbody id="or-reviewed-tbody">
                    <tr><td colspan="11" class="muted">加载中…</td></tr>
                </tbody>
            </table>
        </div>
        <div class="or-pager" id="or-reviewed-pager">
            <button type="button" class="btn-secondary" id="or-reviewed-prev" style="font-size:.72rem;padding:2px 8px">上一页</button>
            <span class="muted" id="or-reviewed-page-label">第 1 / 1 页</span>
            <button type="button" class="btn-secondary" id="or-reviewed-next" style="font-size:.72rem;padding:2px 8px">下一页</button>
        </div>
    </section>

    {# 详情 / 放大 #}
    <div id="or-detail-backdrop" class="or-detail-backdrop" hidden>
        <div class="or-detail-modal" role="dialog" aria-modal="true" aria-labelledby="or-detail-title" id="or-detail-panel">
            <div class="or-detail-modal-head">
                <h3 id="or-detail-title">复盘详情</h3>
                <button type="button" class="btn-secondary" id="or-detail-edit-btn" style="font-size:.72rem;padding:2px 8px">编辑</button>
                <button type="button" class="btn-secondary" id="or-detail-close-btn" style="font-size:.72rem;padding:2px 8px">关闭</button>
            </div>
            <div class="or-detail-grid" id="or-detail-meta"></div>
            <div id="or-detail-text" style="font-size:.76rem;line-height:1.5;margin-bottom:8px"></div>
            <div class="or-detail-images" id="or-detail-images"></div>
        </div>
    </div>
    <div id="or-img-lightbox" class="or-img-lightbox" hidden>
        <img id="or-img-lightbox-img" src="" alt="截图放大">
    </div>

    {# 4. 统计 #}
    <section class="or-section" aria-labelledby="or-stats-heading">
        <div class="or-section-head">
            <span class="or-step" aria-hidden="true">3</span>
            <div>
                <div class="or-section-title" id="or-stats-heading">统计</div>
                <p class="or-section-desc">跟随上方 Tab 与筛选条件汇总。</p>
            </div>
        </div>
        <div id="or-kpi" class="or-kpi-row"></div>
        <div id="or-stats-groups" class="or-stats-grid"></div>
    </section>
</div>

<script src="/static/options_review.js?v=22"></script>