{% extends "base.html" %} {% from "partials/components.html" import
select_field, feedback, empty_state, table_container with context %} {% block
title %}Costs · CalMiner{% endblock %} {% block content %}
<section class="panel">
  <h2>Cost Overview</h2>
  {% if scenarios %}
  <div class="form-grid">
    {{ select_field( "Scenario filter", "costs-scenario-filter",
    options=scenarios, placeholder="Select a scenario" ) }}
  </div>
  {% else %} {{ empty_state( "costs-scenario-empty", "Create a scenario to
  review cost information." ) }} {% endif %} {{ empty_state( "costs-empty",
  "Choose a scenario to review CAPEX and OPEX details." ) }}

  <div id="costs-data" class="hidden">
    {% call table_container( "capex-table-container", aria_label="Scenario CAPEX
    records", heading="Capital Expenditures (CAPEX)" ) %}
    <thead>
      <tr>
        <th scope="col">Amount</th>
        <th scope="col">Description</th>
      </tr>
    </thead>
    <tbody id="capex-table-body"></tbody>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <th id="capex-total">—</th>
      </tr>
    </tfoot>
    {% endcall %} {{ empty_state( "capex-empty", "No CAPEX records for this
    scenario yet.", hidden=True ) }} {% call table_container(
    "opex-table-container", aria_label="Scenario OPEX records",
    heading="Operational Expenditures (OPEX)" ) %}
    <thead>
      <tr>
        <th scope="col">Amount</th>
        <th scope="col">Description</th>
      </tr>
    </thead>
    <tbody id="opex-table-body"></tbody>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <th id="opex-total">—</th>
      </tr>
    </tfoot>
    {% endcall %} {{ empty_state( "opex-empty", "No OPEX records for this
    scenario yet.", hidden=True ) }}
  </div>
</section>

<section class="panel">
  <h2>Add CAPEX Entry</h2>
  {% if scenarios %}
  <form id="capex-form" class="form-grid">
    {{ select_field( "Scenario", "capex-form-scenario", name="scenario_id",
    options=scenarios, required=True, placeholder="Select a scenario",
    placeholder_disabled=True ) }} {{ select_field( "Currency",
    "capex-form-currency", name="currency_code", options=currency_options,
    required=True, placeholder="Select currency", placeholder_disabled=True,
    value_attr="id", label_attr="name" ) }}
    <label for="capex-form-amount">
      Amount
      <input
        id="capex-form-amount"
        type="number"
        name="amount"
        min="0"
        step="0.01"
        required
      />
    </label>
    <label for="capex-form-description">
      Description (optional)
      <textarea
        id="capex-form-description"
        name="description"
        rows="3"
      ></textarea>
    </label>
    <button type="submit" class="btn primary">Add CAPEX</button>
  </form>
  {{ feedback("capex-feedback") }} {% else %} {{ empty_state(
  "capex-form-empty", "Create a scenario before adding CAPEX entries." ) }} {%
  endif %}
</section>

<section class="panel">
  <h2>Add OPEX Entry</h2>
  {% if scenarios %}
  <form id="opex-form" class="form-grid">
    {{ select_field( "Scenario", "opex-form-scenario", name="scenario_id",
    options=scenarios, required=True, placeholder="Select a scenario",
    placeholder_disabled=True ) }} {{ select_field( "Currency",
    "opex-form-currency", name="currency_code", options=currency_options,
    required=True, placeholder="Select currency", placeholder_disabled=True,
    value_attr="id", label_attr="name" ) }}
    <label for="opex-form-amount">
      Amount
      <input
        id="opex-form-amount"
        type="number"
        name="amount"
        min="0"
        step="0.01"
        required
      />
    </label>
    <label for="opex-form-description">
      Description (optional)
      <textarea
        id="opex-form-description"
        name="description"
        rows="3"
      ></textarea>
    </label>
    <button type="submit" class="btn primary">Add OPEX</button>
  </form>
  {{ feedback("opex-feedback") }} {% else %} {{ empty_state( "opex-form-empty",
  "Create a scenario before adding OPEX entries." ) }} {% endif %}
</section>

{% endblock %} {% block scripts %} {{ super() }}
<script id="costs-payload" type="application/json">
  {{ {"capex": capex_by_scenario, "opex": opex_by_scenario, "currency_options": currency_options} | tojson }}
</script>
<script src="/static/js/costs.js"></script>
{% endblock %}