{% 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 Status" %}</h2>
    <div class="text-center">
        <div class="text-3xl font-bold text-indigo-600 mb-2" id="current-time">
            {{ current_time|date:"H:i" }}
        </div>
        <div class="text-sm text-gray-600 mb-4">
            {{ current_time|date:"l, F j, Y" }}
        </div>
        <div class="flex items-center justify-center space-x-4 text-sm">
            <div class="flex items-center">
                <i class="fas fa-server text-green-600 mr-1"></i>
                <span class="text-gray-700">{% translate "Online" %}</span>
            </div>
            <div class="flex items-center">
                <i class="fas fa-database text-blue-600 mr-1"></i>
                <span class="text-gray-700">{% translate "Connected" %}</span>
            </div>
        </div>
    </div>
</div>

<script>
function updateTime() {
    const now = new Date();
    const timeElement = document.getElementById('current-time');
    if (timeElement) {
        timeElement.textContent = now.toLocaleTimeString('en-US', {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit'
        });
    }
}

// Update time every minute
setInterval(updateTime, 60000);
</script>