{% 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-arrow-left-right" aria-hidden="true"></i> Управление балансировкой нагрузки</h1>
        
            </div><div class="admin-toolbar__filters">
            <label for="serviceSearch" class="form-label">Поиск</label>
            <input type="text" class="form-control" id="serviceSearch" placeholder="Поиск сервиса..." style="max-width: 180px;">
        </div>
        <div class="admin-toolbar__actions">
            <button class="btn primary btn-sm" onclick="refreshServices()">
                <i class="bi bi-arrow-clockwise" aria-hidden="true"></i> Обновить
            </button>
        </div>
    </div>
    <div class="admin-card">
        <div class="card-header">
            <h5 class="mb-0">Сервисы</h5>
        </div>
        <div class="table-wrap">
            <div id="servicesList">
                <table class="admin-table table table-hover">
                            <thead>
                                <tr>
                                    <th>Сервис</th>
                                    <th>Алгоритм</th>
                                    <th>Endpoints</th>
                                    <th>Здоровые</th>
                                    <th>Соединения</th>
                                    <th>Действия</th>
                                </tr>
                            </thead>
                            <tbody id="servicesTableBody">
                                <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 class="modal fade" id="loadBalancingModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Настройка балансировки: <span id="modalServiceName"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" id="balancingTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="algorithm-tab" data-bs-toggle="tab" data-bs-target="#algorithm" type="button">Алгоритм</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="weights-tab" data-bs-toggle="tab" data-bs-target="#weights" type="button">Веса</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="distribution-tab" data-bs-toggle="tab" data-bs-target="#distribution" type="button">Распределение</button>
                    </li>
                </ul>
                <div class="tab-content" id="balancingTabContent">
                    <!-- Вкладка алгоритма -->
                    <div class="tab-pane fade show active" id="algorithm" role="tabpanel">
                        <div class="mt-3">
                            <label for="algorithmSelect" class="form-label">Алгоритм балансировки</label>
                            <select class="form-select" id="algorithmSelect">
                                <option value="">Загрузка...</option>
                            </select>
                            <div class="form-text" id="algorithmDescription"></div>
                        </div>
                        <div class="mt-3">
                            <button class="btn primary" onclick="saveAlgorithm()">
                                <i class="bi bi-check-lg"></i> Сохранить алгоритм
                            </button>
                        </div>
                    </div>
                    
                    <!-- Вкладка весов -->
                    <div class="tab-pane fade" id="weights" role="tabpanel">
                        <div class="mt-3">
                            <p class="text-muted">Установите веса для каждого endpoint. Больший вес означает больше запросов.</p>
                            <div id="weightsList"></div>
                        </div>
                        <div class="mt-3">
                            <button class="btn primary" onclick="saveWeights()">
                                <i class="bi bi-check-lg"></i> Сохранить веса
                            </button>
                        </div>
                    </div>
                    
                    <!-- Вкладка распределения -->
                    <div class="tab-pane fade" id="distribution" role="tabpanel">
                        <div class="mt-3">
                            <div id="distributionChart"></div>
                        </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/load_balancing.js') }}"></script>
{% endblock %}