{% extends "base.html" %}

{% block title %}Attendance History | MediHR HRMS{% endblock %}

{% block content %}
<div class="top-bar">
    <div>
        <h1 class="h4 fw-bold mb-1">Attendance History</h1>
        <p class="text-muted small mb-0">Detailed view of all daily attendance records.</p>
    </div>
</div>

<div class="table-card">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Employee</th>
                    <th>Check In</th>
                    <th>Check Out</th>
                    <th>Status</th>
                    <th>Worked Hours</th>
                </tr>
            </thead>
            <tbody>
                {% for record in attendances %}
                <tr>
                    <td class="fw-bold">{{ record.date|date:"d M Y" }}</td>
                    <td>
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-light d-flex align-items-center justify-content-center me-2" style="width: 28px; height: 28px; font-size: 0.7rem">
                                {{ record.employee.first_name|first }}{{ record.employee.last_name|first }}
                            </div>
                            <div>{{ record.employee.first_name }} {{ record.employee.last_name }}</div>
                        </div>
                    </td>
                    <td>{{ record.check_in|time:"H:i"|default:"--" }}</td>
                    <td>{{ record.check_out|time:"H:i"|default:"--" }}</td>
                    <td>
                        <span class="status-pill badge-{{ record.status }}">
                            {{ record.get_status_display }}
                        </span>
                    </td>
                    <td>{{ record.worked_hours }}h</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="6" class="text-center py-5 text-muted">No attendance records found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
