{% extends "_base.html" %}

{% block page_title %}{{ title }}{% endblock %}

{% block extra_css %}
/* ── Chart Grid ───────────────────────────────────── */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.chart-grid .chart-card.full-width { grid-column: 1 / -1; }

/* ── Stats Table ──────────────────────────────────── */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.stats-table th {
    background: #2d3748;
    color: #90cdf4;
    padding: 0.6rem 1rem;
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}
.stats-table th.metric-header { text-align: left; }
.stats-table th.asset-header  { text-align: right; }
.stats-table td {
    padding: 0.45rem 1rem;
    border-bottom: 1px solid #2d3748;
    text-align: right;
}
.stats-table td.metric-name {
    text-align: left;
    color: #cbd5e0;
    padding-left: 1.5rem;
}
.stats-table tr.table-section-header td {
    background: #1e2a3a;
    color: #4299e1;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.4rem 1rem;
    text-align: left;
}
.stats-table tbody tr:hover { background: #1e2a3a; }
.stats-table td.best-value { color: #68d391; font-weight: 600; }
.stats-table td.metric-value {
    font-family: "SFMono-Regular", Consolas, monospace;
}

@media (max-width: 900px) {
    .chart-grid { grid-template-columns: 1fr; }
    .chart-card.full-width { grid-column: 1; }
}
{% endblock %}

{% block header %}
<header class="report-header">
  <h1>&#x1F4CA; {{ title }}</h1>
  <div class="report-meta">
    <span><strong>Period:</strong> {{ period_info | safe }}</span>
    <span><strong>Assets:</strong> {{ assets_list }}</span>
    <span><strong>AUM:</strong> {{ aum }}</span>
  </div>
</header>
{% endblock %}

{% block nav %}
<nav class="toc">
  <a href="#performance">Performance</a>
  <a href="#risk">Risk</a>
  <a href="#annual">Annual</a>
  <a href="#monthly">Monthly Returns</a>
  <a href="#stats-table">Statistics</a>
  <a href="#correlation">Correlation</a>
  <a href="#leadlag">Lead / Lag</a>
  <a href="#costs">Trading Costs</a>
  <a href="#turnover">Turnover</a>
</nav>
{% endblock %}

{% block content %}
  <section class="section" id="performance">
    <h2 class="section-title">Portfolio Performance</h2>
    <div class="chart-card">{{ snapshot_div | safe }}</div>
  </section>

  <section class="section" id="risk">
    <h2 class="section-title">Risk Analysis</h2>
    <div class="chart-grid">
      <div class="chart-card">{{ rolling_sharpe_div | safe }}</div>
      <div class="chart-card">{{ rolling_vol_div | safe }}</div>
    </div>
  </section>

  <section class="section" id="annual">
    <h2 class="section-title">Annual Breakdown</h2>
    <div class="chart-card">{{ annual_sharpe_div | safe }}</div>
  </section>

  <section class="section" id="monthly">
    <h2 class="section-title">Monthly Returns</h2>
    <div class="chart-card">{{ monthly_heatmap_div | safe }}</div>
  </section>

  <section class="section" id="stats-table">
    <h2 class="section-title">Performance Statistics</h2>
    <div class="chart-card" style="overflow-x: auto;">{{ stats_table | safe }}</div>
  </section>

  <section class="section" id="correlation">
    <h2 class="section-title">Correlation Analysis</h2>
    <div class="chart-card">{{ corr_div | safe }}</div>
  </section>

  <section class="section" id="leadlag">
    <h2 class="section-title">Lead / Lag Information Ratio</h2>
    <div class="chart-card">{{ lead_lag_div | safe }}</div>
  </section>

  <section class="section" id="costs">
    <h2 class="section-title">Trading Cost Impact</h2>
    <div class="chart-card">{{ trading_cost_div | safe }}</div>
  </section>

  <section class="section" id="turnover">
    <h2 class="section-title">Turnover Summary</h2>
    <div class="chart-card" style="overflow-x: auto;">{{ turnover_html | safe }}</div>
  </section>
{% endblock %}

{% block footer %}Generated by <strong>jquantstats</strong>&nbsp;|&nbsp;{{ footer_date }}{% endblock %}