{% extends "base.html" %} {% block title %}Maintenance · CalMiner{% endblock %}
{% block content %}
<section class="panel">
  <h2>Maintenance Schedule</h2>
  {% if scenarios %}
  <div class="form-grid">
    <label for="maintenance-scenario-filter">
      Scenario filter
      <select id="maintenance-scenario-filter">
        <option value="">Select a scenario</option>
        {% for scenario in scenarios %}
        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
        {% endfor %}
      </select>
    </label>
  </div>
  {% else %}
  <p class="empty-state">
    Create a <a href="scenarios">scenario</a> to view maintenance entries.
  </p>
  {% endif %}
  <div id="maintenance-empty" class="empty-state">
    Choose a scenario to review upcoming or completed maintenance.
  </div>
  <div id="maintenance-table-wrapper" class="table-container hidden">
    <table aria-label="Scenario maintenance records">
      <thead>
        <tr>
          <th scope="col">Date</th>
          <th scope="col">Equipment</th>
          <th scope="col">Cost</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody id="maintenance-table-body"></tbody>
    </table>
  </div>
</section>

<section class="panel">
  <h2>Add Maintenance Entry</h2>
  {% if scenarios %}
  <form id="maintenance-form" class="form-grid">
    <label for="maintenance-form-scenario">
      Scenario
      <select id="maintenance-form-scenario" name="scenario_id" required>
        <option value="" disabled selected>Select a scenario</option>
        {% for scenario in scenarios %}
        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
        {% endfor %}
      </select>
    </label>
    <label for="maintenance-form-equipment">
      Equipment
      <select
        id="maintenance-form-equipment"
        name="equipment_id"
        required
        disabled
      >
        <option value="" disabled selected>Select equipment</option>
      </select>
    </label>
    <p id="maintenance-equipment-empty" class="empty-state hidden">
      Add equipment for this scenario before scheduling maintenance.
    </p>
    <label for="maintenance-form-date">
      Date
      <input
        id="maintenance-form-date"
        type="date"
        name="maintenance_date"
        required
      />
    </label>
    <label for="maintenance-form-cost">
      Cost
      <input
        id="maintenance-form-cost"
        type="number"
        name="cost"
        min="0"
        step="0.01"
        required
      />
    </label>
    <label for="maintenance-form-description">
      Description (optional)
      <textarea
        id="maintenance-form-description"
        name="description"
        rows="3"
      ></textarea>
    </label>
    <button type="submit" class="btn primary">Add Maintenance</button>
  </form>
  <p id="maintenance-feedback" class="feedback hidden" role="status"></p>
  {% else %}
  <p class="empty-state">
    Create a <a href="scenarios">scenario</a> before managing maintenance
    entries.
  </p>
  {% endif %}
</section>

{% endblock %} {% block scripts %} {{ super() }}
<script id="maintenance-data" type="application/json">
  {{ {"equipment": equipment_by_scenario, "maintenance": maintenance_by_scenario} | tojson }}
</script>
<script src="/static/js/maintenance.js"></script>
{% endblock %}