{% extends "_base.html" %}

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

{# The Data report keeps its own compact look, so it replaces the base CSS
   rather than extending it. #}
{% block base_css %}
body{margin:0;font-family:system-ui,sans-serif;background:#0f1117;color:#e2e8f0}
h1{color:#90cdf4;margin:0 0 4px}
h2{color:#63b3ed;border-bottom:1px solid #2d3748;padding-bottom:6px}
h3{color:#a0aec0;margin:16px 0 6px}
header{padding:24px 32px;background:linear-gradient(135deg,#1a202c,#2d3748);border-bottom:1px solid #4a5568}
.period-info{color:#a0aec0;font-size:.85rem;margin-top:4px}
main{padding:24px 32px}
section{margin-bottom:40px}
.stats-table{border-collapse:collapse;width:100%;font-size:.85rem}
.stats-table th,.stats-table td{padding:6px 12px;text-align:right;border-bottom:1px solid #2d3748}
.stats-table th:first-child,.stats-table td:first-child{text-align:left}
.metric-header,.asset-header{background:#1a202c;color:#90cdf4;font-weight:600}
.metric-name{color:#cbd5e0}
.metric-value{font-family:monospace;color:#e2e8f0}
.table-section-header td{background:#1a202c;color:#68d391;font-size:.75rem;text-transform:uppercase;
letter-spacing:.08em;padding:8px 12px}
footer{padding:16px 32px;color:#718096;font-size:.75rem;border-top:1px solid #2d3748}
{% endblock %}

{% block header %}
<header>
  <h1>{{ title }}</h1>
  <div class="period-info">{{ period_info }}</div>
  <div class="period-info">Assets: {{ assets_str }}</div>
</header>
{% endblock %}

{% block content %}
<main>
  <section id="metrics">
    <h2>Performance Metrics</h2>
    {{ metrics_html | safe }}
  </section>
  <section id="drawdowns">
    <h2>Worst 5 Drawdown Periods</h2>
    {{ drawdowns_html | safe }}
  </section>
  <section id="charts">
    <h2>Charts</h2>
    {{ charts_html | safe }}
  </section>
</main>
{% endblock %}

{% block footer %}Generated by jquantstats · {{ footer_date }}{% endblock %}