{% extends "base.html" %}
{% block title %}Requirements{% endblock %}
{% block page_title %}Class-Subject Requirements{% endblock %}
{% set active = "requirements" %}
{% block content %}
<div class="alert alert-info" style="margin-bottom:16px">
  <strong>ℹ️ What is this?</strong>
  Define which teacher teaches which subject to which class, and how many periods per week.
  This drives the auto-generation engine.
</div>

<div class="split-layout">
  <div class="card">
    <div class="card-header"><h3>Add Requirement</h3></div>
    <div class="card-body">
      <form hx-post="/requirements/add" hx-target="#req-list" hx-swap="outerHTML">
        <div class="form-group">
          <label class="form-label">Class</label>
          <select name="class_id" class="form-select" required>
            <option value="">— Select Class —</option>
            {% for cls in classes %}
            <option value="{{ cls.id }}">Grade {{ cls.grade }} — {{ cls.section }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Subject</label>
          <select name="subject_id" class="form-select" required>
            <option value="">— Select Subject —</option>
            {% for s in subjects %}
            <option value="{{ s.id }}">{{ s.name }} ({{ s.subject_type }})</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Teacher</label>
          <select name="teacher_id" class="form-select" required>
            <option value="">— Select Teacher —</option>
            {% for t in teachers %}
            <option value="{{ t.id }}">{{ t.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Periods per Week</label>
          <input type="number" name="periods_per_week" class="form-input" min="1" max="30" value="5">
        </div>
        <button type="submit" class="btn btn-primary w-full">Add Requirement</button>
      </form>
    </div>
  </div>
  <div id="req-list">{% include "partials/req_list.html" %}</div>
</div>
{% endblock %}