{% extends 'layout.html' %}
{% block content %}
<div class="container-fluid">
    <h1 class="mt-4 mb-4">Tableau de bord du serveur</h1>
    
    <div class="row">
        <!-- CPU -->
        <div class="col-md-4 mb-4">
            <div class="card border-primary shadow">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-cpu"></i> Processeur</span>
                        <span class="badge bg-light text-dark">{{ stats.cpu }}%</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="progress" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped bg-{{ 'danger' if stats.cpu > 85 else 'warning' if stats.cpu > 70 else 'success' }}"
                             role="progressbar" 
                             style="width: {{ stats.cpu }}%"
                             aria-valuenow="{{ stats.cpu }}" 
                             aria-valuemin="0" 
                             aria-valuemax="100">
                        </div>
                    </div>
                    <div class="mt-2">
                        <small class="text-muted">
                            {% if stats.cpu > 85 %} Charge critique {% elif stats.cpu > 70 %} Charge élevée {% else %} Normal {% endif %}
                        </small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Mémoire -->
        <div class="col-md-4 mb-4">
            <div class="card border-info shadow">
                <div class="card-header bg-info text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-memory"></i> Mémoire</span>
                        <span class="badge bg-light text-dark">{{ stats.memory }}%</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="progress" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped bg-{{ 'danger' if stats.memory > 85 else 'warning' if stats.memory > 70 else 'success' }}"
                             role="progressbar" 
                             style="width: {{ stats.memory }}%"
                             aria-valuenow="{{ stats.memory }}" 
                             aria-valuemin="0" 
                             aria-valuemax="100">
                        </div>
                    </div>
                    <div class="mt-2">
                        <small class="text-muted">
                            {% if stats.memory > 85 %} Utilisation critique {% elif stats.memory > 70 %} Utilisation élevée {% else %} Normal {% endif %}
                        </small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Disque -->
        <div class="col-md-4 mb-4">
            <div class="card border-warning shadow">
                <div class="card-header bg-warning text-dark">
                    <div class="d-flex justify-content-between align-items-center">
                        <span><i class="bi bi-hdd"></i> Stockage</span>
                        <span class="badge bg-light text-dark">{{ stats.disk }}%</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="progress" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped bg-{{ 'danger' if stats.disk > 90 else 'warning' if stats.disk > 75 else 'success' }}"
                             role="progressbar" 
                             style="width: {{ stats.disk }}%"
                             aria-valuenow="{{ stats.disk }}" 
                             aria-valuemin="0" 
                             aria-valuemax="100">
                        </div>
                    </div>
                    <div class="mt-2">
                        <small class="text-muted">
                            {% if stats.disk > 90 %} Espace critique {% elif stats.disk > 75 %} Espace limité {% else %} Suffisant {% endif %}
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Section Graphiques -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card shadow">
                <div class="card-header bg-secondary text-white">
                    <i class="bi bi-graph-up"></i> Historique des performances
                </div>
                <div class="card-body">
                    <div id="performanceChart" style="height: 300px;">
                        <!-- Ici viendra le graphique (Chart.js ou autre) -->
                        <canvas id="metricsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bibliothèques supplémentaires -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"></script>

<script>
    // Initialisation du graphique (exemple avec Chart.js)
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('metricsChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                datasets: [
                    {
                        label: 'CPU',
                        data: [12, 19, 15, 32, 25, 30],
                        borderColor: '#0d6efd',
                        tension: 0.1
                    },
                    {
                        label: 'Mémoire',
                        data: [45, 50, 48, 62, 55, 60],
                        borderColor: '#0dcaf0',
                        tension: 0.1
                    },
                    {
                        label: 'Disque',
                        data: [65, 59, 70, 72, 68, 75],
                        borderColor: '#ffc107',
                        tension: 0.1
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
    });
</script>
{% endblock %}