{% load i18n %}

<div class="bg-indigo-50 rounded-xl p-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div>
            <div class="text-3xl font-bold text-indigo-600">{{ total_companies }}</div>
            <div class="text-gray-600">{% translate "Companies" %}</div>
        </div>
        <div>
            <div class="text-3xl font-bold text-indigo-600">{{ total_users }}</div>
            <div class="text-gray-600">{% translate "Users" %}</div>
        </div>
        <div>
            <div class="text-3xl font-bold text-indigo-600">{{ support }}</div>
            <div class="text-gray-600">{% translate "Support" %}</div>
        </div>
        <div>
            <div class="text-3xl font-bold text-indigo-600">{{ uptime }}</div>
            <div class="text-gray-600">{% translate "Uptime" %}</div>
        </div>
    </div>
    <div class="text-center mt-4 text-xs text-gray-500">
        {% translate "Last updated" %}: {{ last_updated|date:"H:i:s" }}
    </div>
</div>
    {% translate "Last updated" %}: {{ now|date:"H:i:s" }}
</div>