{% set margin = (d.ebitdaMonth / d.netRevMonth * 100) | round(1) if d.netRevMonth > 0 else 0 %}
{% set y3_rev = d.annuals[2].revenue if d.annuals | length >= 3 else 0 %}
<div class="grid-4 mb-4">
  <div class="metric-card">
    <div class="metric-card__label">{{ t.card_net_rev_mo }}</div>
    <div class="metric-card__value c-green">{{ d.netRevMonth | int | fmt_currency }}</div>
    <div class="metric-card__sub">{{ t.sub_stabilized }}</div>
  </div>
  <div class="metric-card">
    <div class="metric-card__label">{{ t.card_ebitda_mo }} <span class="ti">i<span class="tp">{{ t.tip_result_ebitda_mo }}</span></span></div>
    <div class="metric-card__value {{ 'c-green' if d.ebitdaMonth >= 0 else 'c-red' }}">{{ d.ebitdaMonth | int | fmt_currency }}</div>
    <div class="metric-card__sub">{{ margin }}% margin</div>
  </div>
  <div class="metric-card">
    <div class="metric-card__label">{{ t.card_annual_rev }}</div>
    <div class="metric-card__value c-head">{{ y3_rev | int | fmt_currency }}</div>
    <div class="metric-card__sub">{{ t.sub_year3 }}</div>
  </div>
  <div class="metric-card">
    <div class="metric-card__label">{{ t.card_rev_pah }} <span class="ti">i<span class="tp">{{ t.tip_result_revpah }}</span></span></div>
    <div class="metric-card__value c-blue">{{ d.revPAH | fmt_currency }}</div>
    <div class="metric-card__sub">Revenue per available hour</div>
  </div>
</div>

<div class="grid-2 mb-4">
  <div class="chart-container">
    <div class="chart-container__label">{{ t.planner_chart_rev_ramp }}</div>
    <div class="chart-h-48 chart-container__canvas"><canvas id="chartRevRamp"></canvas></div>
  </div>
  <div class="chart-container">
    <div class="chart-container__label">{{ t.planner_chart_pl }}</div>
    <div class="chart-h-48 chart-container__canvas"><canvas id="chartPL"></canvas></div>
  </div>
</div>
<script type="application/json" id="chartRevRamp-data">{{ d.ramp_chart | tojson }}</script>
<script type="application/json" id="chartPL-data">{{ d.pl_chart | tojson }}</script>

<div class="mb-section">
  <div class="section-header"><h3>{{ t.planner_section_revenue }}</h3></div>
  {% set streams = [
    (t.stream_court_rental, d.courtRevMonth - d.feeDeduction),
    (t.stream_equipment, d.racketRev + d.ballMargin),
    (t.stream_memberships, d.membershipRev),
    (t.stream_fb, d.fbRev),
    (t.stream_coaching, d.coachingRev),
    (t.stream_retail, d.retailRev),
  ] %}
  {% set total_stream = namespace(v=0) %}
  {% for name, val in streams %}{% set total_stream.v = total_stream.v + val %}{% endfor %}
  <table class="data-table">
    <thead><tr><th>{{ t.th_stream }}</th><th class="right">{{ t.th_monthly }}</th><th class="right">{{ t.th_share }}</th></tr></thead>
    <tbody>
      {% for name, val in streams %}
      <tr>
        <td>{{ name }}</td>
        <td class="mono">{{ val | int | fmt_currency }}</td>
        <td class="mono">{{ ((val / total_stream.v * 100) | int if total_stream.v > 0 else 0) }}%</td>
      </tr>
      {% endfor %}
      <tr class="total-row">
        <td>{{ t.table_total_net_rev }}</td>
        <td class="mono">{{ total_stream.v | int | fmt_currency }}</td>
        <td class="mono">100%</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="mb-section">
  <div class="section-header"><h3>{{ t.planner_section_opex_breakdown }}</h3></div>
  <table class="data-table">
    <thead><tr><th>{{ t.th_item }}</th><th class="right">{{ t.th_monthly }}</th></tr></thead>
    <tbody>
      {% for item in d.opexItems %}
      <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_opex }}</td>
        <td class="mono">{{ d.opex | fmt_currency }}</td>
      </tr>
    </tbody>
  </table>
</div>

{% if s.venue == 'outdoor' %}
<div class="mb-section season-section visible">
  <div class="section-header"><h3>{{ t.planner_section_seasonality }}</h3></div>
  <div class="chart-container"><div class="chart-h-40 chart-container__canvas"><canvas id="chartSeason"></canvas></div></div>
</div>
<script type="application/json" id="chartSeason-data">{{ d.season_chart | tojson }}</script>
{% endif %}
