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

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 style="font-weight:700;margin:0;">Attendance</h4>
  <a href="/attendance/export/?from_date={{ from_date }}&to_date={{ to_date }}" class="btn-outline">📥 Export Excel</a>
</div>

<div class="row mb-4">
  <div class="col-md-6">
    <div class="card" style="padding:18px;text-align:center;">
      <div style="font-size:2rem;font-weight:800;color:#1a7a4a;">{{ present_today }}</div>
      <div style="color:#888;font-size:.85rem;">Present Today (checked in, not yet out)</div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card" style="padding:18px;text-align:center;">
      <div style="font-size:2rem;font-weight:800;color:#1a3c5e;">{{ total_students }}</div>
      <div style="color:#888;font-size:.85rem;">Total Active Students</div>
    </div>
  </div>
</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="date" name="from_date" value="{{ from_date }}" style="max-width:170px;">
    <input class="form-control" type="date" name="to_date" value="{{ to_date }}" style="max-width:170px;">
    <button type="submit" class="btn-primary-main" style="padding:8px 18px;font-size:.85rem;">Filter</button>
  </form>
</div>

<div class="card">
  <div style="overflow-x:auto;max-height:600px;overflow-y:auto;">
    <table class="table table-hover mb-0">
      <thead>
        <tr><th>Student</th><th>Class</th><th>Date</th><th>Event</th><th>Time</th></tr>
      </thead>
      <tbody>
        {% for r in records %}
        <tr>
          <td>{{ r.student.name }}</td>
          <td>{{ r.student.batch_or_class|default:"—" }}</td>
          <td>{{ r.date }}</td>
          <td style="font-weight:600;color:{% if r.event == 'IN' %}#1a7a4a{% else %}#c0392b{% endif %};">{{ r.event }}</td>
          <td>{{ r.timestamp|date:"d M Y H:i" }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="text-center text-muted py-5">No attendance records in this range.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% endblock %}