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

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h4 style="font-weight:700;margin:0;">Students</h4>
    <p style="color:#888;font-size:.87rem;margin:0;">{{ org.name }}</p>
  </div>
  <a href="/students/add/" class="btn-primary-main" style="padding:9px 20px;font-size:.87rem;text-decoration:none;">+ Add Student</a>
</div>

<div class="card mb-3" style="padding:16px;">
  <form method="GET" class="d-flex gap-2 flex-wrap align-items-center">
    <input class="form-control" type="text" name="q" value="{{ q }}" placeholder="Search by name, phone, class..." style="max-width:280px;">
    <label style="display:flex;align-items:center;gap:6px;font-size:.85rem;color:#666;">
      <input type="checkbox" name="inactive" value="1" {% if show_inactive %}checked{% endif %} onchange="this.form.submit()">
      Show inactive
    </label>
    <button type="submit" class="btn-primary-main" style="padding:8px 18px;font-size:.85rem;">Search</button>
  </form>
</div>

<div class="card">
  <div style="overflow-x:auto;">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>Name</th>
          <th>Class/Batch</th>
          <th>Phone</th>
          <th>Monthly Fee</th>
          <th>{{ month }} Status</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for row in students %}
        <tr>
          <td><a href="/students/{{ row.obj.id }}/" style="font-weight:600;color:#1a3c5e;text-decoration:none;">{{ row.obj.name }}</a></td>
          <td>{{ row.obj.batch_or_class|default:"—" }}</td>
          <td>{{ row.obj.phone|default:"—" }}</td>
          <td>₹{{ row.fee_amount }}</td>
          <td>
            {% if row.fee_paid %}
              <span style="color:#1a7a4a;font-weight:600;">✅ Paid</span>
            {% else %}
              <span style="color:#d62828;font-weight:600;">⏳ Pending</span>
            {% endif %}
          </td>
          <td>
            {% if row.obj.is_active %}
              <span style="color:#1a7a4a;">Active</span>
            {% else %}
              <span style="color:#888;">Inactive</span>
            {% endif %}
          </td>
          <td><a href="/students/{{ row.obj.id }}/edit/" style="font-size:.82rem;">Edit</a></td>
        </tr>
        {% empty %}
        <tr><td colspan="7" class="text-center text-muted py-5">No students yet. Click "+ Add Student" or verify one via QR.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}