{% extends "admin_base.html" %}

{% block page_title %}Attendance Dashboard{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/employee-attendance/assets/css/attendance.css">
{% endblock %}

{% block admin_content %}
<div class="attendance-page">
    <h1>Attendance Dashboard</h1>
    <div class="attendance-card-grid">
        <div class="attendance-kpi"><div class="label">Present Today</div><div class="value">{{ stats.present_today | default(value=0) }}</div></div>
        <div class="attendance-kpi"><div class="label">Late Today</div><div class="value">{{ stats.late_today | default(value=0) }}</div></div>
        <div class="attendance-kpi"><div class="label">Half-day Today</div><div class="value">{{ stats.half_day_today | default(value=0) }}</div></div>
        <div class="attendance-kpi"><div class="label">Absent Today</div><div class="value">{{ stats.absent_today | default(value=0) }}</div></div>
    </div>
    <h2>Recent Trend</h2>
    <div class="attendance-table-wrap">
        <table class="blocks-admin-table responsive-table">
            <thead><tr><th>Date</th><th>Present</th><th>Late</th><th>Half-day</th><th>Absent</th></tr></thead>
            <tbody>
                {% for row in trend %}
                <tr>
                    <td data-label="Date">{{ row.attendance_date | date_in_tz(timezone=settings.timezone) }}</td>
                    <td data-label="Present">{{ row.present_count }}</td>
                    <td data-label="Late">{{ row.late_count }}</td>
                    <td data-label="Half-day">{{ row.half_day_count }}</td>
                    <td data-label="Absent">{{ row.absent_count }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}