{% extends "admin/change_list.html" %}
{% load static %}

{% block content %}
<style>
    .project-summary-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 24px;
    }
    .project-summary-card {
        flex: 1 1 200px;
        padding: 20px;
        border-radius: 8px;
        background: #f9f9f9;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        text-align: center;
    }
    .project-summary-card h2 {
        margin: 0;
        font-size: 28px;
    }
    .project-summary-card p {
        margin: 5px 0 0;
        color: #555;
    }
</style>

<div class="project-summary-cards">
    <div class="project-summary-card">
        <h2>{{ total_projects }}</h2>
        <p>Total Projects</p>
    </div>
    <div class="project-summary-card">
        <h2>{{ in_progress }}</h2>
        <p>In Progress</p>
    </div>
    <div class="project-summary-card">
        <h2>{{ completed }}</h2>
        <p>Completed</p>
    </div>
    <div class="project-summary-card">
        <h2>{{ new_projects }}</h2>
        <p>New Projects</p>
    </div>
    <div class="project-summary-card">
        <h2>{{ old_projects }}</h2>
        <p>Old Projects</p>
    </div>
    <div class="project-summary-card">
        <h2>{{ delayed_projects }}</h2>
        <p>Delayed Projects</p>
    </div>
    <div class="project-summary-card">
        <h2>{{ total_developers }}</h2>
        <p>Total Developers</p>
    </div>
</div>

{{ block.super }}
{% endblock %}