{% extends "base.html" %}
{% block title %}Neutral Sigma 0DTE · {{ _('Dashboard') }}{% endblock %}

{% block content %}
  <section class="hero" aria-labelledby="hero-title">
    <div>
      <h1 id="hero-title">{{ _('Neutral trading with real statistics') }}</h1>
      <p>{{ _('Explore, compare, and master IC/IB 0DTE with a clean, professional UI.') }}</p>
      <div class="cta">
        <button class="btn primary">{{ _('New Backtest') }}</button>
        <button class="btn">{{ _('Open Comparator') }}</button>
      </div>
    </div>
    <div class="kpi-badges" aria-label="{{ _('Sample KPIs') }}">
      <div class="kpi"><span class="dot"></span><span>{{ _('EV/trade') }}</span><strong> {{ kpis.ev_trade }}</strong></div>
      <div class="kpi"><span class="dot" style="background:var(--success)"></span><span>{{ _('WinRate') }}</span><strong> {{ kpis.winrate }}</strong></div>
      <div class="kpi"><span class="dot" style="background:var(--warning)"></span><span>{{ _('Max DD') }}</span><strong> {{ kpis.max_dd }}</strong></div>
    </div>
  </section>

  <section class="grid" aria-label="{{ _('Main content') }}">
    <article class="card col-8">
      <h3>{{ _('Equity curve (placeholder)') }}</h3>
      <div class="placeholder">{{ _('Chart area') }}</div>
    </article>
    <aside class="card col-4">
      <h3>{{ _('Favorites') }}</h3>
      <ul>
        {% for item in favoritos %}
          <li>{{ item }}</li>
        {% endfor %}
      </ul>
    </aside>

    <article class="card col-6">
      <h3>{{ _('Performance by time (placeholder)') }}</h3>
      <div class="placeholder">{{ _('Hourly bars') }}</div>
    </article>
    <article class="card col-6">
      <h3>{{ _('Heatmap (placeholder)') }}</h3>
      <div class="placeholder">{{ _('d × w matrix') }}</div>
    </article>

    <article class="card col-12">
      <h3>{{ _('Recent activity') }}</h3>
      <ul>
        <li>{{ _('Saved config SPX · IC · 09:30 · d15 w20') }}</li>
        <li>{{ _('Exported CSV for run #1021') }}</li>
        <li>{{ _('A/B comparison created (IC vs IB)') }}</li>
      </ul>
    </article>
  </section>
{% endblock %}