{% extends 'base.html' %}
{% block title %}Students{% endblock %}
{% block page_title %}Students{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <h1 class="page-title">Students</h1>
    <p class="page-subtitle">Manage all enrolled students</p>
  </div>
  <a href="{% url 'student_add' %}" class="btn btn-primary">
    <i data-lucide="user-plus" style="width:15px;height:15px;"></i>
    Add Student
  </a>
</div>

<!-- Search -->
<div class="card" style="margin-bottom:20px;">
  <div class="card-body" style="padding:14px 20px;">
    <form method="get" style="display:flex;gap:10px;align-items:center;">
      <div class="search-bar" style="flex:1;">
        <i data-lucide="search" style="width:15px;height:15px;color:var(--text-muted);"></i>
        <input type="text" name="q" value="{{ query }}" placeholder="Search by name or student ID…" />
      </div>
      <button type="submit" class="btn btn-primary">Search</button>
      {% if query %}<a href="{% url 'student_list' %}" class="btn btn-secondary">Clear</a>{% endif %}
    </form>
  </div>
</div>

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Student</th>
        <th>ID</th>
        <th>Class</th>
        <th>Email</th>
        <th>Status</th>
        <th>Enrolled</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for student in students %}
      <tr>
        <td>
         
Continuing seamlessly from inside the students list template, then completing all remaining templates and files.

<write path="school_system/templates/students/list.html">
{% extends 'base.html' %}
{% block title %}Students{% endblock %}
{% block page_title %}Students{% endblock %}

{% block content %}
<div class="page-header">
<div class="page-header-left">
  <h1 class="page-title">Students</h1>
  <p class="page-subtitle">Manage all enrolled students</p>
</div>
<a href="{% url 'student_add' %}" class="btn btn-primary">
  <i data-lucide="user-plus" style="width:15px;height:15px;"></i>
  Add Student
</a>
</div>

<div class="card" style="margin-bottom:20px;">
<div class="card-body" style="padding:14px 20px;">
  <form method="get" style="display:flex;gap:10px;align-items:center;">
    <div class="search-bar" style="flex:1;">
      <i data-lucide="search" style="width:15px;height:15px;color:var(--text-muted);"></i>
      <input type="text" name="q" value="{{ query }}" placeholder="Search by name or student ID…" />
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
    {% if query %}<a href="{% url 'student_list' %}" class="btn btn-secondary">Clear</a>{% endif %}
  </form>
</div>
</div>

<div class="table-wrapper">
<table>
  <thead>
    <tr>
      <th>Student</th>
      <th>ID</th>
      <th>Class</th>
      <th>Email</th>
      <th>Status</th>
      <th>Enrolled</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for student in students %}
    <tr>
      <td>
        <div style="display:flex;align-items:center;gap:10px;">
          <div class="avatar-sm">{{ student.first_name|first }}</div>
          <div>
            <div style="font-weight:500;">{{ student.full_name }}</div>
            <div style="font-size:12px;color:var(--text-muted);">{{ student.gender }}</div>
          </div>
        </div>
      </td>
      <td><span class="badge badge-secondary">{{ student.student_id }}</span></td>
      <td>{{ student.school_class|default:"—" }}</td>
      <td style="color:var(--text-secondary);font-size:13px;">{{ student.email }}</td>
      <td>
        <span class="badge {% if student.status == 'active' %}badge-success{% elif student.status == 'graduated' %}badge-cyan{% else %}badge-secondary{% endif %}">
          {{ student.get_status_display }}
        </span>
      </td>
      <td style="color:var(--text-muted);font-size:13px;">{{ student.enrollment_date|date:"M d, Y" }}</td>
      <td>
        <div style="display:flex;gap:6px;">
          <a href="{% url 'student_detail' student.pk %}" class="btn btn-outline btn-sm" data-tooltip="View">
            <i data-lucide="eye" style="width:13px;height:13px;"></i>
          </a>
          <a href="{% url 'student_edit' student.pk %}" class="btn btn-outline btn-sm" data-tooltip="Edit">
            <i data-lucide="pencil" style="width:13px;height:13px;"></i>
          </a>
          <a href="{% url 'student_delete' student.pk %}" class="btn btn-outline btn-sm" style="color:var(--danger);" data-tooltip="Delete">
            <i data-lucide="trash-2" style="width:13px;height:13px;"></i>
          </a>
        </div>
      </td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="7">
        <div class="empty-state">
          <div class="empty-state-icon">👨‍🎓</div>
          <div class="empty-state-title">No students found</div>
          <div class="empty-state-text">{% if query %}Try a different search term{% else %}Add your first student to get started{% endif %}</div>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endblock %}