{% extends "base.html" %}

{% block title %}Server Sentry - Dashboard{% endblock %}

{% block content %}
<div class="flex min-h-screen">
    <!-- Sidebar -->
    <div class="w-64 bg-white shadow-lg">
        <div class="p-4">
            <h1 class="text-xl font-bold text-blue-600">Server Sentry</h1>
        </div>
        <nav class="mt-4">
            <a href="#" class="block px-4 py-2 text-gray-600 hover:bg-blue-50">Dashboard</a>
            <a href="#" class="block px-4 py-2 text-gray-600 hover:bg-blue-50">Servers</a>
            <a href="#" class="block px-4 py-2 text-gray-600 hover:bg-blue-50">Settings</a>
        </nav>
    </div>
    
    <!-- Main Content -->
    <div class="flex-1 p-8">
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2>
        </div>
        
        <!-- Status Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700">Active Servers</h3>
                <p class="text-3xl font-bold text-blue-600 mt-2">0</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700">Total Uptime</h3>
                <p class="text-3xl font-bold text-green-600 mt-2">0%</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700">Alerts</h3>
                <p class="text-3xl font-bold text-yellow-600 mt-2">0</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}