{% extends 'layout.html' %}

{% block title %}Статистика{% endblock %}

{% block style %}
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .jumbotron {
        background-color: #f8f9fa;
        padding: 20px;
        margin: 20px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .jumbotron h1 {
        color: #ff7077;
    }
    .jumbotron h2 {
        color: #007bff;
    }
    .info-block {
        margin: 10px;
        padding: 10px;
        background-color: #f1f1f1;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .tile-container {
        display: flex;
        flex-wrap: wrap; /* Allow tiles to wrap */
        justify-content: center; /* Center tiles horizontally */
    }
    .info-block.stable-version {
        flex: 1;
        text-align: center;
    }
    .info-block h2 {
        color: #333;
        margin-bottom: 5px; /* Adjusted spacing */
    }
    .info-block h3 {
        color: #555; /* Subdued color for secondary headings */
    }
{% endblock %}

{% block body %}
    <div class="tile-container">
        <div class="info-block stable-version">
            <h2 style="color: #1238d2; font-size: 24px;">Наиболее часто используемая виртуальная машина</h2>
            {% if not data_vm %}
                <p style="font-style: italic; color: #666;">Нет данных</p>
            {% else %}
                <div style="margin-top: 10px;">
                    <p style="font-weight: bold; color: #333;">Имя: <span style="color: #007bff;">{{ data_vm.name }}</span></p>
                    <p style="font-weight: bold; color: #333;">Гипервизор: <span style="color: #007bff;">{{ data_vm.hyper }}</span></p>
                    <p style="font-weight: bold; color: #333;">IP-адрес: <span style="color: #007bff;">{{ data_vm.ip_addres }}</span></p>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="tile-container">
        <div class="info-block stable-version">
            <h2 style="color: #1238d2; font-size: 24px;">Статистика по выполненным действиям</h2>
            {% if not action_counts %}
                <p style="font-style: italic; color: #666;">Нет данных</p>
            {% else %}
                <ul style="list-style-type: none; padding: 0;">
                    {% for action in action_counts %}
                        {% set action_name, action_count = action %}
                        <li style="margin-bottom: 10px;">
                            {% if action_name == 'add_vm' %}
                                <span style="color: #007bff; font-weight: bold;">Добавлено ВМ (вручную):</span> <span style="color: #007bff;">{{ action_count }}</span>
                            {% elif action_name == 'del_vm' %}
                                <span style="color: #007bff; font-weight: bold;">Удалено ВМ:</span> <span style="color: #007bff;">{{ action_count }}</span>
                            {% elif action_name == 'edit_vm' %}
                                <span style="color: #007bff; font-weight: bold;">Отредактированно ВМ:</span> <span style="color: #007bff;">{{ action_count }}</span>
                            {% elif action_name == 'occupy_vm' %}
                                <span style="color: #007bff; font-weight: bold;">Занято ВМ:</span> <span style="color: #007bff;">{{ action_count }}</span>
                            {% elif action_name == 'release_vm' %}
                                <span style="color: #007bff; font-weight: bold;">Освобождено ВМ:</span> <span style="color: #007bff;">{{ action_count }}</span>
                            {% elif action_name == 'start_vm' %}
                                <span style="color: #007bff; font-weight: bold;">Запущено ВМ:</span> <span style="color: #007bff;">{{ action_count }}</span>
                            {% elif action_name == 'stop_vm' %}
                                <span style="color: #007bff; font-weight: bold;">Остановлено ВМ:</span> <span style="color: #007bff;">{{ action_count }}</span>
                            {% elif action_name == 'restart_vm' %}
                                <span style="color: #007bff; font-weight: bold;">Перезапущено ВМ:</span> <span style="color: #007bff;">{{ action_count }}</span>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </div>

{% endblock %}