{% extends 'admin/admin_base.html' %}
{% block title %}Контейнеры{% endblock %}
{% block breadcrumb %}
{{ super() }}
<li class="breadcrumb-item active">Контейнеры</li>
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <div class="admin-toolbar__main">
        <h1 class="admin-toolbar__title"><i class="bi bi-box-seam" aria-hidden="true"></i> Управление контейнерами</h1>
    </div>
    <div class="admin-toolbar__filters">
        <input type="search" class="form-control form-control-sm" id="containerSearch" placeholder="Поиск контейнера..." aria-label="Поиск контейнера">
    </div>
    <div class="admin-toolbar__actions">
        <button type="button" class="btn primary btn-sm" onclick="refreshContainers()">
            <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Обновить
        </button>
    </div>
</div>

<div id="containersUnavailableBlock" class="admin-card 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 secondary mt-3" id="containersRetryButton">
            <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Проверить снова
        </button>
    </div>
</div>

<article class="admin-card card" id="containersListCard">
    <div class="card-header">
        <h5 class="mb-0">Контейнеры</h5>
    </div>
    <div class="table-wrap">
        <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>
</article>

<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 type="button" class="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 ghost" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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