{% extends "base.html" %}
{% block title %}Teachers{% endblock %}
{% block body %}

<nav>
  <span class="brand" style="display:flex; align-items:center; gap:8px;">
    <img src="{{ url_for('static', filename='kvs.png') }}" 
         alt="kvs" style="height:40px;">
    Digital Attendance
  </span>

  <div class="links">
    <a href="/dashboard">📊 Dashboard</a>
    <a href="/students">👤 Students</a>
    <a href="/teachers" class="active">👩‍🏫 Teachers</a>
    <a href="/no_class">❓ No-Class</a>
    <a href="/logs">📋 Logs</a>

    {% if session.role == "admin" %}
      <a href="/change-password">🔑 Change Password</a>
    {% endif %}

    <span class="role-chip">{{ role }}</span>
    <a href="/logout">🚪 {{ username }}</a>
  </div>
</nav>

<div class="wrap">

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in messages %}
      <div class="alert {{ cat }}">{{ msg }}</div>
    {% endfor %}
  {% endwith %}

  <!-- ➕ Add Teacher -->
  <div class="card">
    <h2>➕ Add Teacher</h2>

    <form method="POST" action="/teachers/add">
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;">

        <div>
          <label>Username</label>
          <input name="username" required style="width:100%;">
        </div>

        <div>
          <label>Password</label>
          <input type="password" name="password" required style="width:100%;">
        </div>

        <div>
          <label>Class Assigned</label>
          <select name="class_section" required style="width:100%;">
            <option value="">Select Class</option>

            {% for cs in class_sections %}
              <option value="{{ cs.class }}-{{ cs.section }}">
                {{ cs.class }}{{ cs.section }}
              </option>
            {% endfor %}

          </select>
        </div>

        <div>
          <button class="btn btn-navy" type="submit" style="width:100%;">
            Add
          </button>
        </div>

      </div>
    </form>
  </div>

  <!-- 👩‍🏫 Teachers Table -->
  <div class="card">
    <h2>👩‍🏫 All Teachers ({{ teachers|length }})</h2>

    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Username</th>
          <th>Class Assigned</th>
          <th>Action</th>
        </tr>
      </thead>

      <tbody>
        {% for i, t in enumerate(teachers, 1) %}
        <tr>
          <td>{{ i }}</td>

          <td>
            <strong>{{ t["username"] }}</strong>
          </td>

          <td>
            {{ t["class"] }}{{ t["section"] }}
          </td>

          <td>
            <form method="POST"
                  action="/teachers/delete/{{ t['id'] }}"
                  onsubmit="return confirm('Delete teacher {{ t['username'] }}?')">

              <button class="btn btn-red btn-sm" type="submit">
                🗑 Delete
              </button>

            </form>
          </td>
        </tr>

        {% else %}
        <tr>
          <td colspan="4" style="text-align:center;padding:24px;color:var(--muted);">
            No teachers found. Add one above.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

  </div>

</div>

{% endblock %}