{% load static attendance_tags %}
{# Dashboard Template - Multi-person attendance view #}

<style>
.attendance-dashboard {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 20px;
}
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.dashboard-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}
.dashboard-summary {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}
.summary-stat { text-align: center; }
.summary-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}
.summary-label {
    font-size: 0.875rem;
    color: #64748b;
}
.dashboard-grid {
    display: grid;
    gap: 16px;
}
.dashboard-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}
.dashboard-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.employee-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.employee-name {
    display: block;
    font-weight: 600;
}
.employee-dept {
    font-size: 0.75rem;
    color: #64748b;
}
.cal-weekdays-mini {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.625rem;
    color: #64748b;
    margin-bottom: 4px;
}
.cal-grid-mini {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cal-day-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    font-size: 0.625rem;
}
.cal-day-mini.other { opacity: 0.3; }
.cal-dot-mini {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.cal-day-num { color: #64748b; }

/* Dark theme */
.attendance-dashboard.theme-dark { color: #e2e8f0; }
.attendance-dashboard.theme-dark .dashboard-summary {
    background: rgba(45, 45, 66, 0.8);
}
.attendance-dashboard.theme-dark .dashboard-card {
    background: rgba(30, 30, 46, 0.95);
    border-color: rgba(148, 163, 184, 0.2);
}
.attendance-dashboard.theme-dark .summary-value { color: #e2e8f0; }
.attendance-dashboard.theme-dark .summary-label,
.attendance-dashboard.theme-dark .employee-dept,
.attendance-dashboard.theme-dark .cal-weekdays-mini,
.attendance-dashboard.theme-dark .cal-day-num { color: #94a3b8; }
</style>

<div class="attendance-dashboard theme-{{ theme }}" data-year="{{ year }}" data-month="{{ month }}">
    
    {# Header #}
    <div class="dashboard-header">
        <h2 class="dashboard-title">{{ month_name }} {{ year }}</h2>
    </div>
    
    {# Summary stats #}
    {% if show_summary and summary %}
    <div class="dashboard-summary">
        <div class="summary-stat">
            <span class="summary-value">{{ summary.total_present|default:0 }}</span>
            <span class="summary-label">Present</span>
        </div>
        <div class="summary-stat">
            <span class="summary-value">{{ summary.total_absent|default:0 }}</span>
            <span class="summary-label">Absent</span>
        </div>
        <div class="summary-stat">
            <span class="summary-value">{{ summary.attendance_rate|default:0 }}%</span>
            <span class="summary-label">Attendance Rate</span>
        </div>
    </div>
    {% endif %}
    
    {# Employee calendar grid #}
    <div class="dashboard-grid" style="grid-template-columns: repeat({{ columns }}, 1fr);">
        {% for emp in employees %}
        <div class="dashboard-card" data-employee="{{ emp.id }}">
            <div class="dashboard-card-header">
                {% if emp.avatar %}
                <img src="{{ emp.avatar }}" alt="{{ emp.name }}" class="employee-avatar">
                {% endif %}
                <div class="employee-info">
                    <span class="employee-name">{{ emp.name }}</span>
                    {% if emp.department %}
                    <span class="employee-dept">{{ emp.department }}</span>
                    {% endif %}
                </div>
            </div>
            
            {# Mini calendar #}
            <div class="dashboard-calendar">
                <div class="cal-weekdays-mini">
                    {% for day in emp.calendar.weekdays %}
                    <span>{{ day|slice:":1" }}</span>
                    {% endfor %}
                </div>
                <div class="cal-grid-mini">
                    {% for week in emp.calendar.weeks %}
                        {% for day in week %}
                        <div class="cal-day-mini {% if day.current_month %}current{% else %}other{% endif %}">
                            {% if day.status and day.current_month %}
                            <span class="cal-dot-mini" style="background-color: {{ colors|get_item:day.status }};"></span>
                            {% else %}
                            <span class="cal-day-num">{{ day.day }}</span>
                            {% endif %}
                        </div>
                        {% endfor %}
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>