{% extends "base.html" %}

{% block title %}Dashboard - DevOpsLab{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div class="row g-3 mb-4">
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card stat-card stat-card-cpu">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-card-icon">
                    <i class="fas fa-tasks"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Всего ролей</div>
                    <div class="stat-card-value" 
                         hx-get="/api/v1/stats/roles" 
                         hx-trigger="load, every 10s">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card stat-card stat-card-ram">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-card-icon">
                    <i class="fas fa-vial"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Протестировано</div>
                    <div class="stat-card-value" 
                         hx-get="/api/v1/stats/tests" 
                         hx-trigger="load, every 10s">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card stat-card stat-card-hdd">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-card-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Успешных тестов</div>
                    <div class="stat-card-value text-success" 
                         hx-get="/api/v1/stats/success" 
                         hx-trigger="load, every 10s">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card stat-card stat-card-ssd">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="stat-card-icon">
                    <i class="fas fa-cube"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Docker образов</div>
                    <div class="stat-card-value" 
                         hx-get="/api/v1/stats/docker" 
                         hx-trigger="load, every 10s">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <h5 class="mb-0">Последние тесты</h5>
    </div>
    <div class="card-body">
        <div id="test-list" 
             hx-get="/api/v1/tests/recent" 
             hx-trigger="load, every 10s">
            <p class="text-muted">Загрузка...</p>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <h5 class="mb-0">Быстрые действия</h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-12 col-md-4">
                <a href="/roles/create" class="btn btn-primary w-100">
                    <i class="fas fa-plus me-2"></i>
                    Создать роль
                </a>
            </div>
            <div class="col-12 col-md-4">
                <a href="/presets/create" class="btn btn-success w-100">
                    <i class="fas fa-plus me-2"></i>
                    Создать preset
                </a>
            </div>
            <div class="col-12 col-md-4">
                <a href="/roles/import" class="btn btn-outline-primary w-100">
                    <i class="fas fa-download me-2"></i>
                    Импортировать роль
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}