{% extends "base.html" %} {% block title %}Scenario Management · CalMiner{%
endblock %} {% block content %}
<section class="panel">
  <h2>Create a New Scenario</h2>
  <form id="scenario-form" class="form-grid">
    <label>
      <span>Name</span>
      <input type="text" name="name" id="name" required />
    </label>
    <label>
      <span>Description</span>
      <input type="text" name="description" id="description" />
    </label>
    <button type="submit" class="btn primary">Create Scenario</button>
  </form>
  <div id="feedback" class="feedback hidden" aria-live="polite"></div>
  <div class="table-container">
    {% if scenarios %}
    <table id="scenario-table">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody id="scenario-table-body">
        {% for scenario in scenarios %}
        <tr data-scenario-id="{{ scenario.id }}">
          <td>{{ scenario.name }}</td>
          <td>{{ scenario.description or "—" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p id="empty-state" class="empty-state">
      No scenarios yet. Create one to get started.
    </p>
    <table id="scenario-table" class="hidden" aria-hidden="true">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody id="scenario-table-body"></tbody>
    </table>
    {% endif %}
  </div>
</section>
{% endblock %} {% block scripts %} {{ super() }}
<script src="/static/js/scenario-form.js"></script>
{% endblock %}