{% extends 'teacher/teacher_base.html' %}

{% block content %}
<style>
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 25px;
    }
    .square-card {
        background: #fff;
        aspect-ratio: 1 / 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: 1px solid #e5e7eb;
        transition: 0.3s;
        text-decoration: none;
    }
    .square-card:hover { border-color: var(--primary); transform: translateY(-3px); }
    .square-card .val { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 5px; }
    .square-card .label { font-size: 0.7rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }

    .search-top {
        margin-bottom: 25px;
    }
    .search-top input {
        width: 100%;
        padding: 15px 20px;
        border: 1px solid #e5e7eb;
        font-size: 1rem;
        outline: none;
    }
    .search-top input:focus { border-color: var(--primary); }

    .action-row { margin-top: 30px; }
    .full-btn {
        width: 100%;
        padding: 18px;
        background: var(--primary);
        color: #fff;
        text-align: center;
        text-decoration: none;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: block;
        transition: 0.3s;
    }
    .full-btn:hover { background: var(--primary-dark); }
</style>

<div class="search-top">
    <form action="{% url 'teacher_attendance' %}" method="get">
        <input type="text" name="q" placeholder="Quick Search Student Name or ID...">
    </form>
</div>

<div class="dashboard-grid">
    <div class="square-card">
        <div class="val" style="color: #10b981;">{{ present_count }}</div>
        <div class="label">Present</div>
    </div>
    <div class="square-card">
        <div class="val" style="color: #ef4444;">{{ absent_count }}</div>
        <div class="label">Absent</div>
    </div>
    <div class="square-card">
        <div class="val" style="color: var(--primary);">{{ total_students }}</div>
        <div class="label">Total Students</div>
    </div>
</div>

<div class="action-row">
    <a href="{% url 'teacher_attendance' %}" class="full-btn">
        <i class="fas fa-clipboard-user"></i> See Attendance
    </a>
</div>
{% endblock %}