<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}期货量化{% endblock %}</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #f8fafc; --surface: #fff; --fg: #1e293b; --sub: #64748b;
    --border: #e2e8f0; --accent: #3b82f6; --accent-light: #eff6ff;
    --th-bg: #f1f5f9; --th-fg: #475569;
    --danger: #ef4444; --danger-bg: #fef2f2; --danger-fg: #dc2626;
    --success: #10b981; --success-bg: #ecfdf5; --success-fg: #059669;
    --warn: #f59e0b; --warn-bg: #fffbeb; --warn-fg: #d97706;
    --na: #94a3b8;
    --sidebar-w: 220px; --header-h: 56px;
  }
  [data-theme="dark"] {
    --bg: #0f172a; --surface: #1e293b; --fg: #e2e8f0; --sub: #94a3b8;
    --border: #334155; --accent: #60a5fa; --accent-light: #1e3a5f;
    --th-bg: #1e293b; --th-fg: #cbd5e1;
    --danger: #f87171; --danger-bg: #3b1515; --danger-fg: #fca5a5;
    --success: #34d399; --success-bg: #0a1f17; --success-fg: #6ee7b7;
    --warn: #fbbf24; --warn-bg: #2d2110; --warn-fg: #fcd34d;
    --na: #64748b;
  }

  body {
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    color: var(--fg); background: var(--bg);
    display: flex; min-height: 100vh;
  }

  /* ── Sidebar ── */
  .sidebar {
    width: var(--sidebar-w); min-width: var(--sidebar-w);
    background: var(--surface); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; position: fixed;
    top: 0; left: 0; bottom: 0; z-index: 50;
    padding: 0;
  }
  .sidebar-logo {
    height: var(--header-h); display: flex; align-items: center;
    padding: 0 20px; font-size: 1rem; font-weight: 700;
    letter-spacing: 0.02em; border-bottom: 1px solid var(--border);
  }
  .sidebar-nav { flex: 1; padding: 12px 0; }
  .sidebar-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px; color: var(--sub); text-decoration: none;
    font-size: 0.9rem; transition: background .12s, color .12s;
    border-left: 3px solid transparent;
  }
  .sidebar-nav a:hover { background: var(--accent-light); color: var(--fg); }
  .sidebar-nav a.active {
    color: var(--accent); background: var(--accent-light);
    border-left-color: var(--accent); font-weight: 600;
  }
  .sidebar-nav .icon { font-size: 1.1rem; width: 22px; text-align: center; }
  .sidebar-footer {
    padding: 16px 20px; border-top: 1px solid var(--border);
  }
  .theme-btn {
    width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--fg); cursor: pointer;
    font-size: 0.82rem; transition: background .12s;
  }
  .theme-btn:hover { background: var(--th-bg); }

  /* ── Main ── */
  .main {
    margin-left: var(--sidebar-w); flex: 1;
    display: flex; flex-direction: column; min-height: 100vh;
  }
  .main-header {
    height: var(--header-h); min-height: var(--header-h);
    padding: 0 28px; display: flex; align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .main-header h1 { font-size: 1.15rem; font-weight: 600; }
  .breadcrumb { color: var(--sub); font-size: 0.82rem; margin-left: 12px; }
  .breadcrumb a { color: var(--sub); text-decoration: none; }
  .breadcrumb a:hover { color: var(--accent); }

  .main-content { flex: 1; padding: 24px 28px; }

  /* ── Components ── */
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
  .stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 18px 20px;
  }
  .stat-card .label { font-size: 0.78rem; color: var(--sub); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
  .stat-card .value { font-size: 1.5rem; font-weight: 700; }
  .stat-card .trend { font-size: 0.8rem; margin-top: 4px; }
  .trend-up { color: var(--success-fg); }
  .trend-down { color: var(--danger-fg); }

  .section-title {
    font-size: 0.85rem; font-weight: 600; color: var(--sub);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  /* ── Table ── */
  .table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; margin-bottom: 24px;
  }
  table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
  th {
    background: var(--th-bg); color: var(--th-fg); font-weight: 600;
    padding: 10px 14px; border-bottom: 2px solid var(--border);
    text-align: center; white-space: nowrap; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  td { padding: 9px 14px; border-bottom: 1px solid var(--border); text-align: center; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--accent-light); }
  td:first-child { font-weight: 500; }
  tr.active td { background: #dbeafe !important; }
  [data-theme="dark"] tr.active td { background: #1e3a5f !important; }
  .na { color: var(--na); }

  /* ── Badges ── */
  .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
  .badge-up { background: var(--success-bg); color: var(--success-fg); }
  .badge-down { background: var(--danger-bg); color: var(--danger-fg); }
  .badge-warn { background: var(--warn-bg); color: var(--warn-fg); }

  /* ── Forms ── */
  .form-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; padding: 24px; max-width: 520px;
  }
  .form-group { margin-bottom: 16px; }
  .form-group label {
    display: block; font-size: 0.8rem; font-weight: 600;
    color: var(--sub); margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  .form-group input, .form-group select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.9rem;
    background: var(--bg); color: var(--fg);
    transition: border-color .15s;
  }
  .form-group input:focus, .form-group select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
  }
  .btn {
    padding: 9px 22px; border: none; border-radius: 6px;
    font-size: 0.88rem; font-weight: 600; cursor: pointer;
    transition: background .12s;
  }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-primary:hover { opacity: 0.9; }

  /* ── Drawer ── */
  .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99; display: none; }
  .drawer-overlay.show { display: block; }
  .drawer { position: fixed; top: 0; right: 0; width: 360px; height: 100%; background: var(--surface); border-left: 1px solid var(--border); z-index: 100; padding: 28px 24px; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; box-shadow: -4px 0 24px rgba(0,0,0,.12); }
  .drawer.show { transform: translateX(0); }
  .drawer h3 { font-size: 1rem; margin-bottom: 4px; }
  .drawer .date-label { color: var(--sub); font-size: 0.82rem; margin-bottom: 18px; }
  .drawer .calc-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 16px; }
  .drawer .calc-table td { padding: 5px 10px; border: 1px solid var(--border); text-align: center; }
  .drawer .calc-table tr:first-child td { background: var(--th-bg); font-weight: 600; color: var(--th-fg); }
  .drawer .result { font-size: 0.85rem; line-height: 2; color: var(--fg); }
  .drawer .result b { font-size: 1.15rem; }
  .drawer .close-btn { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--sub); line-height: 1; }
  .drawer .close-btn:hover { color: var(--fg); }
  .amp-cell { cursor: pointer; color: var(--accent); font-weight: 600; }
  .amp-cell:hover { text-decoration: underline; }

  input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    cursor: pointer;
  }
  [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    filter: none;
  }
  [data-theme="dark"] input[type="date"] {
    color-scheme: dark;
  }

</style>
</head>
<body>
<aside class="sidebar">
  <div class="sidebar-logo">📊 期货量化</div>
  <nav class="sidebar-nav">
    <a href="/contracts/" class="{% if active_nav == 'contracts' %}active{% endif %}">
      <span class="icon">📈</span> 行情数据
    </a>
    <a href="/positions/" class="{% if active_nav == 'positions' %}active{% endif %}">
      <span class="icon">📐</span> 仓位管理
    </a>
    <a href="/trades/" class="{% if active_nav == 'trades' %}active{% endif %}">
      <span class="icon">📝</span> 交易记录
    </a>
    <a href="/admin/" class="{% if active_nav == 'admin' %}active{% endif %}">
      <span class="icon">⚙️</span> 系统管理
    </a>
  </nav>
  <div class="sidebar-footer">
    <div style="font-size:0.78rem;color:var(--sub);margin-bottom:8px;">
      👤 {{ request.state.user.username if request.state.user else '—' }}
    </div>
    <a href="/auth/logout" style="font-size:0.78rem;color:var(--sub);text-decoration:none;">退出登录</a>
    <button class="theme-btn" style="margin-top:8px;" id="themeToggle">🌙 暗色模式</button>
  </div>
</aside>

<div class="main">
  <header class="main-header">
    <h1>{% block heading %}概览{% endblock %}</h1>
    <span class="breadcrumb">{% block breadcrumb %}{% endblock %}</span>
  </header>
  <div class="main-content">
    {% block content %}{% endblock %}
  </div>
</div>

<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
<div class="drawer" id="drawer">
  <button class="close-btn" onclick="closeDrawer()">&times;</button>
  <h3 id="drawer-title"></h3>
  <p class="date-label" id="drawer-date"></p>
  <table class="calc-table" id="drawer-table"></table>
  <div class="result" id="drawer-result"></div>
</div>

<script>
var themeBtn = document.getElementById('themeToggle');
themeBtn.addEventListener('click', toggleTheme);
function setTheme(dark) {
  if (dark) {
    document.documentElement.setAttribute('data-theme', 'dark');
    document.documentElement.style.colorScheme = 'dark';
    themeBtn.textContent = '☀️ 亮色模式';
  } else {
    document.documentElement.removeAttribute('data-theme');
    document.documentElement.style.colorScheme = 'light';
    themeBtn.textContent = '🌙 暗色模式';
  }
  try { localStorage.setItem('ft-theme', dark ? 'dark' : 'light'); } catch(e) {}
}
function toggleTheme() {
  setTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
}
(function() {
  try {
    var s = localStorage.getItem('ft-theme');
    if (s === 'dark' || (!s && matchMedia('(prefers-color-scheme: dark)').matches)) setTheme(true);
  } catch(e) {}
})();

var activeRow = null;
function closeDrawer() {
  document.getElementById('overlay').classList.remove('show');
  document.getElementById('drawer').classList.remove('show');
  if (activeRow) { activeRow.classList.remove('active'); activeRow = null; }
}
</script>
</body>
</html>
