{% load i18n %}

<div class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-lg font-semibold text-gray-800 mb-4">{% translate "System Overview" %}</h2>
    <div class="space-y-4">
        <div class="flex justify-between items-center">
            <span class="text-gray-600">{% translate "Total Companies" %}</span>
            <span class="font-semibold text-gray-800">{{ total_companies }}</span>
        </div>
        <div class="flex justify-between items-center">
            <span class="text-gray-600">{% translate "Active Companies" %}</span>
            <span class="font-semibold text-green-600">{{ active_companies }}</span>
        </div>
        <div class="flex justify-between items-center">
            <span class="text-gray-600">{% translate "Pending Companies" %}</span>
            <span class="font-semibold text-yellow-600">{{ pending_companies }}</span>
        </div>
        <div class="flex justify-between items-center">
            <span class="text-gray-600">{% translate "Total Users" %}</span>
            <span class="font-semibold text-gray-800">{{ total_users }}</span>
        </div>
    </div>
</div>