{% extends "base.html" %}

{% block title %}Dashboard - Face Attendance{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <p class="eyebrow">Overview</p>
    <h1>Dashboard</h1>
  </div>
  {% if current_user.can_operate %}
  <a class="btn btn-primary" href="{{ url_for('attendance.kiosk') }}">Open kiosk</a>
  {% endif %}
</div>

<div class="stats-grid">
  <div class="stat-card">
    <span>Active people</span>
    <strong>{{ stats.active_people }}</strong>
  </div>
  <div class="stat-card">
    <span>Total people</span>
    <strong>{{ stats.people }}</strong>
  </div>
  <div class="stat-card">
    <span>Attendance events</span>
    <strong>{{ stats.events }}</strong>
  </div>
  <div class="stat-card">
    <span>Staff accounts</span>
    <strong>{{ stats.accounts }}</strong>
  </div>
</div>

<section class="content-section">
  <div class="section-header">
    <h2>Recent attendance</h2>
    <a href="{{ url_for('attendance.index') }}">View all</a>
  </div>
  {% if latest_events %}
  <div class="table-responsive">
    <table class="table align-middle">
      <thead>
        <tr>
          <th>Person</th>
          <th>Type</th>
          <th>Time</th>
          <th>Recorded by</th>
        </tr>
      </thead>
      <tbody>
        {% for event in latest_events %}
        <tr>
          <td>{{ event.person.full_name }}</td>
          <td><span class="badge text-bg-{{ 'success' if event.event_type == 'check_in' else 'warning' }}">{{ event.type_label }}</span></td>
          <td>{{ event.occurred_at.strftime("%Y-%m-%d %H:%M") }}</td>
          <td>{{ event.created_by.full_name if event.created_by else "System" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">No attendance has been recorded yet.</div>
  {% endif %}
</section>
{% endblock %}