templates/view_students.html

{% extends 'base.html' %}
{% block title %}View Students — StudentMS{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h2 class="page-title">All Students</h2>
    <p class="page-sub">
      {% if students %}{{ students|length }} record(s) found{% else %}No records{% endif %}
    </p>
  </div>
  <a href="{{ url_for('add_student') }}" class="btn-primary">
    <i class="fas fa-plus"></i> Add Student
  </a>
</div>

<!-- ── SEARCH BAR ── -->
<div class="search-bar card">
  <form method="GET" action="{{ url_for('view_students') }}" id="searchForm">
    <div class="search-row">
      <div class="search-input-wrap">
        <i class="fas fa-magnifying-glass search-icon"></i>
        <input type="text" name="q" value="{{ q }}" placeholder="Search students…" autocomplete="off" id="searchInput" />
        {% if q %}<button type="button" class="clear-search" onclick="clearSearch()"><i class="fas fa-xmark"></i></button>{% endif %}
      </div>

      <select name="col" class="search-col">
        <option value="full_name"  {% if col=='full_name'  %}selected{% endif %}>by Name</option>
        <option value="student_id" {% if col=='student_id' %}selected{% endif %}>by ID</option>
        <option value="course"     {% if col=='course'     %}selected{% endif %}>by Course</option>
        <option value="phone"      {% if col=='phone'      %}selected{% endif %}>by Phone</option>
      </select>

      <button type="submit" class="btn-primary">
        <i class="fas fa-search"></i> Search
      </button>
      {% if q %}
      <a href="{{ url_for('view_students') }}" class="btn-outline">Clear</a>
      {% endif %}
    </div>
  </form>
</div>

<!-- ── TABLE ── -->
<div class="card mt-3">
  {% if students %}
  <div class="table-wrap">
    <table class="data-table" id="studentsTable">
      <thead>
        <tr>
          <th>#</th>
          <th>Student ID</th>
          <th>Full Name</th>
          <th>Gender</th>
          <th>Course</th>
          <th>Branch</th>
          <th>Year/Sem</th>
          <th>Phone</th>
          <th>Email</th>
          <th>City</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for s in students %}
        <tr>
          <td>{{ loop.index }}</td>
          <td><span class="badge badge-id">{{ s.student_id }}</span></td>
          <td class="fw-600">{{ s.full_name }}</td>
          <td>
            <span class="badge {% if s.gender=='Male' %}badge-blue{% elif s.gender=='Female' %}badge-pink{% else %}badge-gray{% endif %}">
              {{ s.gender }}
            </span>
          </td>
          <td>{{ s.course }}</td>
          <td>{{ s.branch }}</td>
          <td>{{ s.year_sem }}</td>
          <td>{{ s.phone }}</td>
          <td class="text-small">{{ s.email }}</td>
          <td>{{ s.city }}</td>
          <td class="actions">
            <a href="{{ url_for('edit_student', sid=s.id) }}" class="btn-icon btn-edit" title="Edit">
              <i class="fas fa-pen"></i>
            </a>
            <!-- Delete triggers a modal -->
            <button type="button"
                    class="btn-icon btn-delete"
                    title="Delete"
                    onclick="confirmDelete({{ s.id }}, '{{ s.full_name }}')">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- hidden delete form -->
  <form id="deleteForm" method="POST" action="" style="display:none;">
  </form>

  {% else %}
  <div class="empty-state">
    <i class="fas fa-users-slash"></i>
    <p>
      {% if q %}No students matching "<strong>{{ q }}</strong>".
      {% else %}No students added yet. <a href="{{ url_for('add_student') }}">Add one →</a>{% endif %}
    </p>
  </div>
  {% endif %}
</div>

<!-- ── DELETE CONFIRM MODAL ── -->
<div class="modal-backdrop" id="deleteModal" style="display:none;">
  <div class="modal">
    <div class="modal-icon danger"><i class="fas fa-triangle-exclamation"></i></div>
    <h3>Confirm Delete</h3>
    <p>Are you sure you want to delete<br /><strong id="deleteStudentName"></strong>?<br />This action cannot be undone.</p>
    <div class="modal-actions">
      <button type="button" class="btn-ghost" onclick="closeModal()">Cancel</button>
      <button type="button" class="btn-danger" onclick="submitDelete()">
        <i class="fas fa-trash"></i> Delete
      </button>
    </div>
  </div>
</div>

{% endblock %}