{% load i18n %}
{# -------------------------------------------------------------------------- #}
    {# STATS CARDS SECTION (9 KPIs) #}
    {# -------------------------------------------------------------------------- #}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-8">
        
        {# GLOBAL - 1. Total Jobs (System) #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="list" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "Total Jobs" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ total_jobs_global }}</div>
            <div class="text-xs text-gray-500">{% trans "All Active & Drafted Positions" %}</div>
        </div>

        {# SCOPED - 2. Total Active Jobs #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="briefcase" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "Active Jobs" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ total_active_jobs }}</div>
            <div class="text-xs text-gray-500">{% trans "Currently Open Requisitions" %}</div>
        </div>

        {# SCOPED - 3. Total Candidates #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="users" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "Total Applications" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ total_applications }}</div>
            <div class="text-xs text-gray-500">{% trans "Total applications" %}</div>
        </div>

        {# SCOPED - 4. Open Positions #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="layout-list" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "Open Positions" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ total_open_positions }}</div>
            <div class="text-xs text-gray-500">{% trans "Total Slots to be Filled" %}</div>
        </div>
        
        {# SCOPED - 5. Avg Apps per Job #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="bar-chart-2" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "Avg. Apps per Job" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ average_applications|floatformat:1 }}</div>
            <div class="text-xs text-gray-500">{% trans "Average Applications per Job" %}</div>
        </div>

        {# --- Efficiency & Quality Metrics --- #}

        {# 6. Time-to-Hire #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="clock" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "Time-to-Hire" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ avg_time_to_hire_days }}</div>
            <div class="text-xs text-gray-500">{% trans "Average Days" %}</div>
        </div>

        {# 7. Avg Match Score #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="star" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "Avg. Match Score" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ avg_match_score|floatformat:1 }}</div>
            <div class="text-xs text-gray-500">{% trans "Average AI Score" %}</div>
        </div>
        
        {# 8. High Potential #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="trophy" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "High Potential" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ high_potential_count }}</div>
            <div class="text-xs text-gray-500">{% trans "Score ≥ 75% Profiles" %} ({{ high_potential_ratio|floatformat:1 }}%)</div>
        </div>

        {# 9. Pending Interviews #}
        <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div class="flex items-center gap-2 mb-3">
                <i data-lucide="calendar" class="w-5 h-5 text-temple-red"></i>
                <h3 class="text-sm font-semibold text-gray-800">{% trans "Pending Interviews" %}</h3>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ pending_interviews|default:0 }}</div>
            <div class="text-xs text-gray-500">{% trans "Scheduled interviews pending" %}</div>
        </div>

    </div>