<div class="grid-3 mb-4">
  <div class="metric-card">
    <div class="metric-card__label">{{ t.card_total_capex }}</div>
    <div class="metric-card__value c-red">{{ d.capex | fmt_currency }}</div>
  </div>
  <div class="metric-card">
    <div class="metric-card__label">{{ t.card_per_court }}</div>
    <div class="metric-card__value c-head">{{ d.capexPerCourt | int | fmt_currency }}</div>
    <div class="metric-card__sub">{{ d.totalCourts }} {{ t.label_courts }}</div>
  </div>
  <div class="metric-card">
    <div class="metric-card__label">{{ t.card_per_sqm }}</div>
    <div class="metric-card__value c-head">{{ d.capexPerSqm | int | fmt_currency }}</div>
    <div class="metric-card__sub">{{ d.sqm | fmt_n }} m²</div>
  </div>
  {% if d.budgetTarget > 0 %}
  <div class="budget-indicator budget-indicator--{{ 'over' if d.budgetVariance > 0 else 'under' }}">
    <div class="metric-card__label">{{ t.budget_over if d.budgetVariance > 0 else t.budget_under }}</div>
    <div class="metric-card__value {{ 'c-red' if d.budgetVariance > 0 else 'c-green' }}">{{ ('+' if d.budgetVariance > 0 else '') }}{{ d.budgetVariance | int | fmt_currency }}</div>
    <div class="metric-card__sub">{{ d.budgetPct | int }}% of {{ d.budgetTarget | fmt_k }} budget</div>
  </div>
  {% endif %}
</div>

<div class="mb-section">
<div class="section-header"><h3>{{ t.planner_section_capex }}</h3></div>
<table class="data-table">
  <thead>
    <tr><th>{{ t.th_item }}</th><th class="right">{{ t.th_amount }}</th></tr>
  </thead>
  <tbody>
    {% for item in d.capexItems %}
    <tr>
      <td>{{ item.name }}{% if item.info %} <span style="color:var(--txt-3);font-size:10px">({{ item.info }})</span>{% endif %}</td>
      <td class="mono">{{ item.amount | fmt_currency }}</td>
    </tr>
    {% endfor %}
    <tr class="total-row">
      <td>{{ t.table_total_capex }}</td>
      <td class="mono">{{ d.capex | fmt_currency }}</td>
    </tr>
  </tbody>
</table>
</div>

<div class="chart-container mt-4">
  <div class="chart-container__label">{{ t.planner_chart_capex }}</div>
  <div class="chart-h-56 chart-container__canvas">
    <canvas id="chartCapex"></canvas>
  </div>
</div>
<script type="application/json" id="chartCapex-data">{{ d.capex_chart | tojson }}</script>
