{% extends 'admin/admin_base.html' %}
{% block title %}Контейнеры{% endblock %}
{% block breadcrumb %}
{{ super() }}
<li class="breadcrumb-item active">Контейнеры</li>
{% endblock %}
{% block admin_content %}
<div class="container-fluid">
    <div class="admin-toolbar">
        <h1 class="admin-toolbar__title"><i class="bi bi-box-seam" aria-hidden="true"></i> Управление контейнерами</h1>
        <div class="admin-toolbar__filters">
            <label for="containerSearch" class="form-label">Поиск</label>
            <input type="text" class="form-control" id="containerSearch" placeholder="Поиск контейнера..." style="max-width: 180px;">
        </div>
        <div class="admin-toolbar__actions">
            <button class="btn btn-primary btn-sm" onclick="refreshContainers()">
                <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Обновить
            </button>
        </div>
    </div>
    <!-- Блок: управление контейнерами недоступно (Docker не установлен или недоступен) -->
    <div id="containersUnavailableBlock" class="admin-card d-none">
        <div class="card-body text-center py-5">
            <i class="bi bi-exclamation-triangle text-warning" style="font-size: 3rem;" aria-hidden="true"></i>
            <h5 class="mt-3">Управление контейнерами недоступно</h5>
            <p class="text-muted mb-0" id="containersUnavailableMessage">
                Docker не установлен или API недоступен. Установите Docker на сервере или убедитесь, что демон запущен и приложение имеет к нему доступ (например, сокет <code>/var/run/docker.sock</code>).
            </p>
            <button type="button" class="btn btn-outline-primary mt-3" id="containersRetryButton">
                <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Проверить снова
            </button>
        </div>
    </div>

    <div class="admin-card" id="containersListCard">
        <div class="card-header">
            <h5 class="mb-0">Контейнеры</h5>
        </div>
        <div class="admin-table-wrap">
            <div id="containersList">
                <table class="admin-table table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Имя</th>
                            <th>Образ</th>
                            <th>Статус</th>
                            <th>Ресурсы</th>
                            <th>Действия</th>
                        </tr>
                    </thead>
                    <tbody id="containersTableBody">
                        <tr>
                            <td colspan="6" class="text-center">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Загрузка...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно для деталей контейнера -->
<div class="modal fade" id="containerDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Детали контейнера: <span id="modalContainerName"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" id="containerTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button">Информация</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="resources-tab" data-bs-toggle="tab" data-bs-target="#resources" type="button">Ресурсы</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="events-tab" data-bs-toggle="tab" data-bs-target="#events" type="button">События</button>
                    </li>
                </ul>
                <div class="tab-content" id="containerTabContent">
                    <!-- Вкладка информации -->
                    <div class="tab-pane fade show active" id="info" role="tabpanel">
                        <div class="mt-3" id="containerInfoContent">
                            <p class="text-muted">Загрузка...</p>
                        </div>
                    </div>
                    
                    <!-- Вкладка ресурсов -->
                    <div class="tab-pane fade" id="resources" role="tabpanel">
                        <div class="mt-3">
                            <div id="containerResourcesContent">
                                <p class="text-muted">Загрузка...</p>
                            </div>
                            <div class="mt-3">
                                <h6>Настройка ресурсов</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label for="cpuQuota" class="form-label">CPU Quota (микросекунды)</label>
                                        <input type="number" class="form-control" id="cpuQuota" min="0">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="cpuPeriod" class="form-label">CPU Period (микросекунды)</label>
                                        <input type="number" class="form-control" id="cpuPeriod" min="0">
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-6">
                                        <label for="memoryLimit" class="form-label">Memory Limit (байты)</label>
                                        <input type="number" class="form-control" id="memoryLimit" min="0">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="memorySwap" class="form-label">Memory Swap (байты)</label>
                                        <input type="number" class="form-control" id="memorySwap" min="0">
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button class="btn btn-primary" onclick="updateContainerResources()">
                                        <i class="bi bi-check-lg"></i> Сохранить ресурсы
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Вкладка событий -->
                    <div class="tab-pane fade" id="events" role="tabpanel">
                        <div class="mt-3" id="containerEventsContent">
                            <p class="text-muted">Загрузка...</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block admin_scripts %}
<script src="{{ url_for('static', filename='js/containers.js') }}"></script>
{% endblock %}
