{% extends "layout.html" %}

{% block content %}
<div class="container-xl">

  <!-- Page header -->
  <div class="page-header d-print-none mb-4">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          Trading – Dashboard
        </h2>
        <div class="text-muted mt-1">
          Temporary overview (focus is on Calibration)
        </div>
      </div>
    </div>
  </div>

  <!-- KPI row -->
  <div class="row row-deck row-cards mb-4">
    <div class="col-sm-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <div class="subheader">Equity</div>
          <div class="h1">—</div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <div class="subheader">PnL</div>
          <div class="h1">—</div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-lg-4">
      <div class="card">
        <div class="card-body">
          <div class="subheader">Bot status</div>
          <div class="h1">—</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Calibration CTA -->
  <div class="row">
    <div class="col-12">
      <div class="card card-md">
        <div class="card-body text-center">
          <h3 class="mb-3">Strategy Calibration</h3>
          <p class="text-muted mb-4">
            Configure data, stops, strategies and parameters step by step.
          </p>

          <a href="/calibration/data" class="btn btn-primary btn-lg">
            Go to Calibration
          </a>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}