{% extends "base.html" %} {% from "partials/components.html" import
select_field, feedback, empty_state, table_container with context %} {% block
title %}Consumption · CalMiner{% endblock %} {% block content %}
<section class="panel">
  <h2>Consumption Tracking</h2>
  <div class="form-grid">
    {{ select_field( "Scenario filter", "consumption-scenario-filter",
    options=scenarios, placeholder="Select a scenario" ) }}
  </div>
  {{ empty_state( "consumption-empty", "Choose a scenario to review its
  consumption records." ) }} {% call table_container(
  "consumption-table-wrapper", hidden=True, aria_label="Scenario consumption
  records" ) %}
  <thead>
    <tr>
      <th scope="col">Amount</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody id="consumption-table-body"></tbody>
  {% endcall %}
</section>

<section class="panel">
  <h2>Add Consumption Record</h2>
  {% if scenarios %}
  <form id="consumption-form" class="form-grid">
    {{ select_field( "Scenario", "consumption-form-scenario",
    name="scenario_id", options=scenarios, required=True, placeholder="Select a
    scenario", placeholder_disabled=True ) }}
    <label for="consumption-form-unit">
      Unit
      <select id="consumption-form-unit" name="unit_name" required>
        <option value="" disabled selected>Select unit</option>
        {% for unit in unit_options %}
        <option value="{{ unit.name }}" data-symbol="{{ unit.symbol }}">
          {{ unit.name }} ({{ unit.symbol }})
        </option>
        {% endfor %}
      </select>
    </label>
    <input id="consumption-form-unit-symbol" type="hidden" name="unit_symbol" />
    <label for="consumption-form-amount">
      Amount
      <input
        id="consumption-form-amount"
        type="number"
        name="amount"
        min="0"
        step="0.01"
        required
      />
    </label>
    <label for="consumption-form-description">
      Description (optional)
      <textarea
        id="consumption-form-description"
        name="description"
        rows="3"
      ></textarea>
    </label>
    <button type="submit" class="btn primary">Add Record</button>
  </form>
  {{ feedback("consumption-feedback") }} {% else %}
  <p class="empty-state">
    Create a <a href="scenarios">scenario</a> before adding consumption records.
  </p>
  {% endif %}
</section>

{% endblock %} {% block scripts %} {{ super() }}
<script id="consumption-data" type="application/json">
  {{ {"scenarios": scenarios, "consumption": consumption_by_scenario, "unit_options": unit_options} | tojson }}
</script>
<script src="/static/js/consumption.js"></script>
{% endblock %}