{% extends 'layout.html' %}

{% block title %} Управление {% endblock %}


{% block style %}
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    th {
        background-color: #f2f2f2;
    }
    .add {
        display: inline-block;
        margin-right: 10px;
    }
    .action-buttons {
        display: flex;
        flex-direction: column;
    }
    .action-button {
        padding: 8px 12px;
        margin-bottom: 5px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .start {
        background-color: #28a745; /* Зеленый цвет */
        color: #fff;
    }
    .stop {
        background-color: #dc3545; /* Красный цвет */
        color: #fff;
    }
    .restart {
        background-color: #007bff; /* Синий цвет */
        color: #fff;
    }
    .search-container {
        margin-bottom: 20px;
    }

    #searchInput {
        width: 50%;
        padding: 8px;
        margin-bottom: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
{% endblock %}

{% block body %}
    <div class="search-container">
        <input type="text" id="searchInput" onkeyup="searchTable()" placeholder="Поиск...">
    </div>
    <table>
        <tr>
            <th>#</th>
            <th>Гипер</th>
            <th>Адрес</th>
            <th>Название</th>
            <th>Операционная система</th>
            <th>ОЗУ</th>
            <th>ЦПУ</th>
            <th>Состояние</th>
            <th>Действия</th>
        </tr>
        {% for vm in virtual_machines %}
            <tr>
                <td>{{ loop.index }}</td>
                <td>{{ vm.hyper }}</td>
                <td>
                    {% if vm.ip_addres == None %}
                        Данных нет
                    {% else %}
                        {{ vm.ip_addres }}
                    {% endif %}
                </td>
                <td>{{ vm.name }}</td>
                <td>{{ vm.os }}</td>
                <td>
                    {% if vm.memory < 1024 %}
                        {{ vm.memory }} Мб
                    {% else %}
                        {{ (vm.memory // 1024) | int }} Гб
                    {% endif %}
                </td>
                <td>{{ vm.cpu }}</td>
                <td>
                    {% if vm.power_status == 'poweredOn' %}
                        <img src="{{ url_for('static', filename='on.png') }}" width="20" height="20">
                    {% elif vm.power_status == 'poweredOff' %}
                        <img src="{{ url_for('static', filename='off.png') }}" width="20" height="20">
                    {% else %}
                        Не определено
                    {% endif %}
                </td>
                <td>
                    {% if vm.technical != True %}
                        {% if vm.power_status == 'poweredOn' %}
                            <div class="action-buttons">
                                <button class="action-button stop" onclick="confirmAction('{{ url_for('vm.stop_virtual_machine', name=vm.name, hyper=vm.hyper) }}', 'Вы уверены, что хотите остановить {{ vm.name }} {% if vm.ip_addres == None %} Не определено {% else %}  {{ vm.ip_addres }} {% endif %}?')">Остановить</button>
                                <button class="action-button restart" onclick="confirmAction('{{ url_for('vm.restart_virtual_machine', name=vm.name, hyper=vm.hyper) }}', 'Вы уверены, что хотите перезапустить {{ vm.name }} {% if vm.ip_addres == None %} Не определено {% else %}  {{ vm.ip_addres }} {% endif %}?')">Перезапустить</button>
                            </div>
                        {% elif vm.power_status == 'poweredOff' %}
                            <div class="action-buttons">
                                <button class="action-button start" onclick="confirmAction('{{ url_for('vm.start_virtual_machine', name=vm.name, hyper=vm.hyper) }}', 'Вы уверены, что хотите запустить {{ vm.name }} {% if vm.ip_addres == None %} Не определено {% else %}  {{ vm.ip_addres }} {% endif %}?')">Запустить</button>
                            </div>
                        {% endif %}
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
    </table>

<script>
    function searchTable() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("searchInput");
        filter = input.value.toUpperCase();
        table = document.getElementsByTagName("table")[0];
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (var j = 0; j < td.length; j++) {
                if (td[j]) {
                    txtValue = td[j].textContent || td[j].innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                        break;
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    }

    function confirmAction(url, message) {
        if (confirm(message)) {
            window.location.href = url;
        }
    }
</script>
{% endblock %}