{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard | FoxFitt{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Welcome back, {{ user.first_name|default:user.username }}!</h1>
        <a href="{% url 'attendance_log' %}" class="btn text-white shadow-sm" style="background-color: #10b981;">
            <i class="fas fa-plus fa-sm text-white-50 me-1"></i> Log Work
        </a>
    </div>

    <!-- Stats Row -->
    <div class="row g-4 mb-4">
        <!-- Active Workers Card -->
        <div class="col-xl-4 col-md-6">
            <div class="card border-0 shadow-sm h-100 py-2" style="border-left: 4px solid #10b981 !important;">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #10b981;">
                                Active Workers</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_workers|default:"0" }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-secondary opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Projects Card -->
        <div class="col-xl-4 col-md-6">
            <div class="card border-0 shadow-sm h-100 py-2" style="border-left: 4px solid #3b82f6 !important;">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #3b82f6;">
                                Active Projects</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ total_projects|default:"0" }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-hard-hat fa-2x text-secondary opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Today's Attendance Card -->
        <div class="col-xl-4 col-md-6">
            <div class="card border-0 shadow-sm h-100 py-2" style="border-left: 4px solid #f59e0b !important;">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs font-weight-bold text-uppercase mb-1" style="color: #f59e0b;">
                                Today's Logs</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ today_attendance|default:"0" }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-check fa-2x text-secondary opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Row -->
    <div class="row">
        <div class="col-lg-12 mb-4">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header py-3 bg-white d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold" style="color: #0f172a;">Recent Activity</h6>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-0">No recent activity to show yet. Start by logging today's attendance!</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}