{% extends 'base.html' %}
{% load static %}

{% block title %}Assign Class Teacher — {{ school_class.name }}{% endblock %}

{% block content %}
<div class="container-fluid">

  <!-- Breadcrumb -->
  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'academics:class_list' %}">Classes</a></li>
      <li class="breadcrumb-item"><a href="{% url 'academics:class_detail' school_class.pk %}">{{ school_class.name }}</a></li>
      <li class="breadcrumb-item active">Assign Class Teacher</li>
    </ol>
  </nav>

  <div class="row justify-content-center">
    <div class="col-lg-7">

      <!-- Current teacher card -->
      <div class="card shadow mb-4">
        <div class="card-header bg-white border-bottom d-flex align-items-center">
          <i class="fas fa-chalkboard-teacher text-primary me-2"></i>
          <strong>{{ school_class.name }} — Class Teacher Assignment</strong>
        </div>
        <div class="card-body">
          {% if current_teacher %}
          <div class="alert alert-info d-flex align-items-center mb-4" role="alert">
            <i class="fas fa-user-check fa-lg me-3 text-info"></i>
            <div>
              <strong>Current class teacher:</strong>
              {{ current_teacher.user.get_full_name }}
              <span class="badge bg-secondary ms-2">{{ current_teacher.get_role_display }}</span>
            </div>
          </div>
          {% else %}
          <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
            <i class="fas fa-exclamation-triangle fa-lg me-3"></i>
            <div>No class teacher assigned yet.</div>
          </div>
          {% endif %}

          <!-- Assign form -->
          <form method="post">
            {% csrf_token %}
            <div class="mb-3">
              <label for="teacher_id" class="form-label fw-semibold">
                Select new class teacher
              </label>
              <select name="teacher_id" id="teacher_id" class="form-select form-select-lg">
                <option value="">— Remove class teacher —</option>
                {% for teacher in teachers %}
                <option value="{{ teacher.id }}"
                  {% if current_teacher and teacher.id == current_teacher.id %}selected{% endif %}>
                  {{ teacher.user.get_full_name }}
                  ({{ teacher.get_role_display }}
                  {% if teacher.employee_id %} · {{ teacher.employee_id }}{% endif %})
                </option>
                {% endfor %}
              </select>
              <div class="form-text">
                Only staff with role <em>Teacher</em> or <em>Class Teacher</em> are listed.
                To add more staff, change their role in
                <a href="{% url 'staff:staff_list' %}">Staff Management</a>.
              </div>
            </div>

            <div class="d-flex gap-2 mt-4">
              <button type="submit" class="btn btn-primary px-4">
                <i class="fas fa-save me-1"></i> Save Assignment
              </button>
              <a href="{% url 'academics:class_detail' school_class.pk %}" class="btn btn-outline-secondary px-4">
                Cancel
              </a>
            </div>
          </form>
        </div>
      </div>

      <!-- Info box -->
      <div class="card border-0 bg-light">
        <div class="card-body">
          <h6 class="text-muted mb-2"><i class="fas fa-info-circle me-1"></i> What does "Class Teacher" mean?</h6>
          <p class="small text-muted mb-1">
            The <strong>class teacher</strong> (homeroom teacher) is assigned directly to the class.
            They will see this class in the attendance marking dropdown when they log in.
          </p>
          <p class="small text-muted mb-0">
            <strong>Subject teachers</strong> are assigned separately per subject via the class detail page.
            A teacher can be both the class teacher <em>and</em> a subject teacher for the same class.
          </p>
        </div>
      </div>

    </div>
  </div>
</div>
{% endblock %}