{% 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: nowrap; /* Ensure tiles stay in a single line */
    }
    .info-block.stable-version {
        flex: 1; /* Distribute space equally among tiles */
    }
{% endblock %}

{% block body %}
    <div class="jumbotron text-center">
        {% if session.logged_in %}
            {% for stb in stables_version %}
                <div class="tile-container">
                    <div class="info-block stable-version">
                        <h2>Мониторинг: {{ stb.monitoring }}</h2>
                    </div>
                    <div class="info-block stable-version">
                        <h2>Управление печатью: {{ stb.printmanager }}</h2>
                    </div>
                </div>
            {% endfor %}
            <div class="info-block">
                <h3>Количество виртуальных машин: {{ total_vm }}</h3>
            </div>
            <div class="info-block">
                <h3>Количество занятых виртуальных машин: {{ number_of_employees }}</h3>
            </div>
            <div class="info-block">
                <h3>Количество технических виртуальных машин: {{ number_of_technical }}</h3>
            </div>
            <div class="info-block">
                <h3>Количество виртуальных машин доступных для тестов: {{ quantity_for_tests }}</h3>
            </div>
        {% else %}
            <div class="info-block">
                <h1>Для пользования данным сервисом необходимо пройти регистрацию и авторизацию!</h1>
            </div>
            {% for stb in stables_version %}
                <div class="tile-container">
                    <div class="info-block stable-version">
                        <h2>Мониторинг: {{ stb.monitoring }}</h2>
                    </div>
                    <div class="info-block stable-version">
                        <h2>Управление печатью: {{ stb.printmanager }}</h2>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>
{% endblock %}