{% extends "base.html" %}

{% block title %}Kehadiran Saya{% endblock %}
{% block page_title %}Kehadiran Saya{% endblock %}

{% block content %}
<!-- Stats -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center">
        <p class="text-2xl font-bold text-green-600">{{ stats.hadir }}</p>
        <p class="text-xs text-gray-500 mt-1">Hadir</p>
    </div>
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center">
        <p class="text-2xl font-bold text-blue-600">{{ stats.izin }}</p>
        <p class="text-xs text-gray-500 mt-1">Izin</p>
    </div>
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center">
        <p class="text-2xl font-bold text-yellow-600">{{ stats.sakit }}</p>
        <p class="text-xs text-gray-500 mt-1">Sakit</p>
    </div>
    <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 text-center">
        <p class="text-2xl font-bold text-red-600">{{ stats.alpha }}</p>
        <p class="text-xs text-gray-500 mt-1">Alpha</p>
    </div>
</div>

<!-- Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Tanggal</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Kelas</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                {% for k in kehadiran_list %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 text-sm text-gray-600">{{ k.date.strftime('%d %B %Y') }}</td>
                    <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ k.kelas.name }}</td>
                    <td class="px-6 py-4">
                        {% if k.status == 'hadir' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Hadir</span>
                        {% elif k.status == 'izin' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Izin</span>
                        {% elif k.status == 'sakit' %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Sakit</span>
                        {% else %}
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Alpha</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if not kehadiran_list %}
                <tr><td colspan="3" class="px-6 py-8 text-center text-gray-400 text-sm">Belum ada data kehadiran</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}