{% extends 'layout.html' %}

{% block title %} Редактирование {% endblock %}


{% block style %}
   table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    th {
        background-color: #f2f2f2;
    }
    .add {
        display: inline-block;
        margin-right: 10px;
        padding: 8px 12px;
        background-color: #007bff;
        color: #fff;
        border-radius: 4px;
        text-decoration: none;
    }
    .add:hover {
        background-color: #4da3ff;
    }
    .action-button {
        padding: 6px 10px;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-right: 5px;
    }
    .action-button.delete {
        background-color: #dc3545;
    }
    .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>
    <a href="{{ url_for('vm.add_virtual_machine') }}" class="add">Добавить ВМ</a>
    <table id="vmTable">
        <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>
                    <div style="display: flex; align-items: center;">
                        <button class="action-button" onclick="window.location.href='{{ url_for('vm.edit_virtual_machine', id=vm.id) }}'">Редактировать</button>
                        <button class="action-button delete" onclick="confirmDelete('{{ url_for('vm.delete_virtual_machine', id=vm.id) }}')">Удалить</button>
                    </div>
                </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.getElementById("vmTable");
        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 confirmDelete(url) {
        if (confirm('Вы уверены, что хотите удалить данную ВМ?')) {
            window.location.href = url;
        }
    }
</script>
{% endblock %}