{% extends "base.html" %}

{% block title %}Dashboard - Inspection Reporting Tool{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900 mb-2">Dashboard</h1>
    <p class="text-gray-600">Welcome back, {{ current_user.full_name }}!</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <div class="card">
        <div class="card-body">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
                    <i class="fas fa-file-alt text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Total Inspections</h3>
                    <p class="text-2xl font-bold text-gray-900">{{ total_inspections }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
                    <i class="fas fa-check-circle text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Completed</h3>
                    <p class="text-2xl font-bold text-gray-900">{{ completed_inspections }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
                    <i class="fas fa-clock text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">In Progress</h3>
                    <p class="text-2xl font-bold text-gray-900">{{ in_progress_inspections }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-8">
    <div class="card-header">
        <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold text-gray-900">Recent Inspections</h2>
            <a href="{{ url_for('inspections.inspection_new') }}" class="btn btn-primary">
                <i class="fas fa-plus mr-1"></i> New Inspection
            </a>
        </div>
    </div>
    <div class="card-body">
        {% if recent_inspections %}
            <div class="overflow-x-auto">
                <table class="table">
                    <thead class="table-thead">
                        <tr>
                            <th scope="col" class="table-th">ID</th>
                            <th scope="col" class="table-th">Location</th>
                            <th scope="col" class="table-th">Status</th>
                            <th scope="col" class="table-th">Created</th>
                            <th scope="col" class="table-th">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for inspection in recent_inspections %}
                        <tr>
                            <td class="table-td">INS-{{ inspection.id }}</td>
                            <td class="table-td">{{ inspection.location }}</td>
                            <td class="table-td">
                                <span class="badge 
                                    {% if inspection.status == 'completed' %}badge-success{% elif inspection.status == 'in_progress' %}badge-warning{% else %}badge-info{% endif %}">
                                    {{ inspection.status }}
                                </span>
                            </td>
                            <td class="table-td">{{ inspection.created_at.strftime('%Y-%m-%d') }}</td>
                            <td class="table-td">
                                <a href="{{ url_for('inspections.view', inspection_id=inspection.id) }}" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
                                <a href="{{ url_for('inspections.edit', inspection_id=inspection.id) }}" class="text-blue-600 hover:text-blue-900">Edit</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-8">
                <i class="fas fa-file-alt text-gray-300 text-4xl mb-2"></i>
                <p class="text-gray-500">No inspections found</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}