{% extends "base.html" %}
{% block title %}Substitution{% endblock %}
{% block page_title %}Substitute Teacher Finder{% endblock %}
{% set active = "substitute" %}

{% block content %}
<div class="card" style="max-width:600px;margin-bottom:24px">
  <div class="card-header"><h3>Find Substitute</h3></div>
  <div class="card-body">
    <form hx-post="/substitute/find" hx-target="#sub-results" hx-swap="innerHTML" hx-indicator="#sub-spinner">
      <div class="form-row-2">
        <div class="form-group">
          <label class="form-label">Absent Teacher</label>
          <select name="absent_teacher_id" class="form-select" required>
            <option value="">— Select —</option>
            {% for t in teachers %}
            <option value="{{ t.id }}">{{ t.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Day of Absence</label>
          <select name="day" class="form-select" required>
            {% for d in ['Mon','Tue','Wed','Thu','Fri','Sat'] %}
            <option>{{ d }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">
        Find Substitutes
        <span id="sub-spinner" class="htmx-indicator spinner-sm"></span>
      </button>
    </form>
  </div>
</div>

<div id="sub-results"></div>
{% endblock %}