{% extends "base.html" %}
{% block title %}Classes{% endblock %}
{% block page_title %}Classes & Sections{% endblock %}
{% set active = "classes" %}
{% block content %}
<div class="split-layout">
  <div class="card">
    <div class="card-header"><h3>Add Class</h3></div>
    <div class="card-body">
      <form hx-post="/classes/add" hx-target="#class-list" hx-swap="outerHTML">
        <div class="form-row-3">
          <div class="form-group">
            <label class="form-label">Grade</label>
            <select name="grade" class="form-select">
              {% for g in ['I','II','III','IV','V','VI','VII','VIII','IX','X','XI','XII'] %}
              <option>{{ g }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Section</label>
            <input type="text" name="section" class="form-input" value="A" maxlength="2">
          </div>
          <div class="form-group">
            <label class="form-label">Room No.</label>
            <input type="text" name="room_no" class="form-input" placeholder="101">
          </div>
        </div>
        <button type="submit" class="btn btn-primary w-full">Add Class</button>
      </form>
    </div>
  </div>

  <div id="class-list">{% include "partials/class_list.html" %}</div>
</div>
{% endblock %}