{% extends "base.html" %}

{% block title %}AWM{% endblock %}

{% block content %}

        <!-- Плейбуки -->
        <div id="playbooks-tab" class="tab-content active">
            <div class="card">
                <div class="toolbar">
                    <h2>📝 Плейбуки</h2>
                    <div style="display: flex; gap: 10px;">
                        <button class="btn btn-primary" onclick="openPlaybookBuilderModal()">
                            <span>🔧</span> Конструктор
                        </button>
                        <button class="btn btn-primary" onclick="openPlaybookModal()">
                            <span>✏️</span> Создать вручную
                        </button>
                    </div>
                </div>
                <div id="playbooks-list">
                    <div class="loading">Загрузка...</div>
                </div>
            </div>
        </div>

        <!-- Инвентори -->
        <div id="inventories-tab" class="tab-content">
            <div class="card">
                <div class="toolbar">
                    <h2>📋 Инвентори</h2>
                    <div style="display: flex; gap: 10px;">
                        <button class="btn btn-primary" onclick="openInventoryBuilderModal()">
                            <span>🔧</span> Конструктор
                        </button>
                        <button class="btn btn-primary" onclick="openInventoryModal()">
                            <span>✏️</span> Создать вручную
                        </button>
                    </div>
                </div>
                <div id="inventories-list">
                    <div class="loading">Загрузка...</div>
                </div>
            </div>
        </div>

        <!-- Запуски -->
        <div id="runs-tab" class="tab-content">
            <div class="card">
                <div class="toolbar">
                    <h2>▶️ Запуски</h2>
                    <button class="btn btn-success" onclick="openRunModal()">
                        <span>▶</span> Запустить плейбук
                    </button>
                </div>
                <div id="runs-list">
                    <div class="loading">Загрузка...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Модальное окно для плейбука -->
    <div id="playbook-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="playbook-modal-title">Создать плейбук</h3>
                <button class="close-btn" onclick="closePlaybookModal()">&times;</button>
            </div>
            <form id="playbook-form">
                <div class="form-group">
                    <label>Название</label>
                    <input type="text" id="playbook-name" required>
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <input type="text" id="playbook-description">
                </div>
                <div class="form-group">
                    <label>Содержимое (YAML)</label>
                    <textarea id="playbook-content" required></textarea>
                </div>
                <div style="display: flex; gap: 10px; justify-content: flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="closePlaybookModal()">Отмена</button>
                    <button type="submit" class="btn btn-primary">Сохранить</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модальное окно для инвентори -->
    <div id="inventory-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="inventory-modal-title">Создать инвентори</h3>
                <button class="close-btn" onclick="closeInventoryModal()">&times;</button>
            </div>
            <form id="inventory-form">
                <div class="form-group">
                    <label>Название</label>
                    <input type="text" id="inventory-name" required>
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <input type="text" id="inventory-description">
                </div>
                <div class="form-group">
                    <label>Тип</label>
                    <select id="inventory-type">
                        <option value="ini">INI</option>
                        <option value="yaml">YAML</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Содержимое</label>
                    <textarea id="inventory-content" required></textarea>
                </div>
                <div style="display: flex; gap: 10px; justify-content: flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="closeInventoryModal()">Отмена</button>
                    <button type="submit" class="btn btn-primary">Сохранить</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модальное окно для запуска -->
    <div id="run-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Запустить плейбук</h3>
                <button class="close-btn" onclick="closeRunModal()">&times;</button>
            </div>
            <form id="run-form">
                <div class="form-group">
                    <label>Плейбук</label>
                    <select id="run-playbook" required></select>
                </div>
                <div class="form-group">
                    <label>Инвентори (опционально)</label>
                    <select id="run-inventory">
                        <option value="">Без инвентори</option>
                    </select>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="run-check-mode"> Check mode (dry-run)
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="run-diff-mode"> Diff mode
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>Limit (опционально)</label>
                    <input type="text" id="run-limit" placeholder="host1,host2">
                </div>
                <div class="form-group">
                    <label>Tags (опционально, через запятую)</label>
                    <input type="text" id="run-tags" placeholder="tag1,tag2">
                </div>
                <div class="form-group">
                    <label>Skip Tags (опционально, через запятую)</label>
                    <input type="text" id="run-skip-tags" placeholder="tag1,tag2">
                </div>
                <div style="display: flex; gap: 10px; justify-content: flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="closeRunModal()">Отмена</button>
                    <button type="submit" class="btn btn-success">Запустить</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модальное окно для просмотра логов -->
    <div id="log-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Лог выполнения</h3>
                <button class="close-btn" onclick="closeLogModal()">&times;</button>
            </div>
            <div id="log-content" class="log-container">Загрузка...</div>
        </div>
    </div>

    <!-- Модальное окно конструктора плейбуков -->
    <div id="playbook-builder-modal" class="modal">
        <div class="modal-content" style="max-width: 1000px;">
            <div class="modal-header">
                <h3>Конструктор плейбука</h3>
                <button class="close-btn" onclick="closePlaybookBuilderModal()">&times;</button>
            </div>
            <form id="playbook-builder-form">
                <div class="form-group">
                    <label>Шаблон плейбука</label>
                    <select id="builder-playbook-template" onchange="loadPlaybookTemplate()">
                        <option value="">Создать с нуля</option>
                        <optgroup label="Базовые операции">
                            <option value="install_package">Установка пакета</option>
                            <option value="configure_service">Настройка сервиса</option>
                            <option value="deploy_app">Развертывание приложения</option>
                            <option value="backup">Резервное копирование</option>
                            <option value="update_system">Обновление системы</option>
                        </optgroup>
                        <optgroup label="Контейнеризация">
                            <option value="docker_setup">Настройка Docker</option>
                            <option value="docker_compose">Docker Compose</option>
                            <option value="podman_setup">Настройка Podman</option>
                        </optgroup>
                        <optgroup label="Kubernetes">
                            <option value="k8s_deploy">Развертывание в Kubernetes</option>
                            <option value="k8s_configmap">Создание ConfigMap</option>
                            <option value="k8s_secret">Создание Secret</option>
                        </optgroup>
                        <optgroup label="CI/CD">
                            <option value="jenkins_setup">Настройка Jenkins</option>
                            <option value="gitlab_runner">Настройка GitLab Runner</option>
                            <option value="github_actions">GitHub Actions подготовка</option>
                        </optgroup>
                        <optgroup label="Веб-серверы">
                            <option value="nginx_setup">Настройка Nginx</option>
                            <option value="apache_setup">Настройка Apache</option>
                            <option value="load_balancer">Настройка Load Balancer</option>
                        </optgroup>
                        <optgroup label="Базы данных">
                            <option value="postgres_setup">Настройка PostgreSQL</option>
                            <option value="mysql_setup">Настройка MySQL</option>
                            <option value="redis_setup">Настройка Redis</option>
                            <option value="mongodb_setup">Настройка MongoDB</option>
                        </optgroup>
                        <optgroup label="Мониторинг">
                            <option value="prometheus_setup">Настройка Prometheus</option>
                            <option value="grafana_setup">Настройка Grafana</option>
                            <option value="zabbix_setup">Настройка Zabbix</option>
                        </optgroup>
                        <optgroup label="Логирование">
                            <option value="elk_setup">Настройка ELK Stack</option>
                            <option value="fluentd_setup">Настройка Fluentd</option>
                            <option value="loki_setup">Настройка Loki</option>
                        </optgroup>
                        <optgroup label="Безопасность">
                            <option value="firewall_setup">Настройка Firewall</option>
                            <option value="ssl_cert">Установка SSL сертификата</option>
                            <option value="fail2ban_setup">Настройка Fail2ban</option>
                            <option value="ssh_hardening">Усиление SSH</option>
                        </optgroup>
                        <optgroup label="Сеть">
                            <option value="network_config">Настройка сети</option>
                            <option value="vpn_setup">Настройка VPN</option>
                        </optgroup>
                    </select>
                </div>
                <div class="form-group">
                    <label>Название плейбука</label>
                    <input type="text" id="builder-playbook-name" required>
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <input type="text" id="builder-playbook-description">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Хосты</label>
                        <input type="text" id="builder-playbook-hosts" value="all" placeholder="all, localhost, webservers">
                    </div>
                    <div class="form-group">
                        <label>Подключение</label>
                        <select id="builder-playbook-connection">
                            <option value="">По умолчанию</option>
                            <option value="local">local</option>
                            <option value="ssh">ssh</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label><input type="checkbox" id="builder-playbook-gather-facts" checked> Собирать факты</label>
                    </div>
                    <div class="form-group">
                        <label><input type="checkbox" id="builder-playbook-become"> Использовать sudo</label>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label><input type="checkbox" id="builder-playbook-ssh-no-check"> Отключить проверку SSH ключей хостов</label>
                        <small style="display: block; color: #718096; font-size: 12px; margin-top: 5px;">
                            Добавляет ansible_ssh_common_args: '-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null'
                        </small>
                    </div>
                </div>
                <div id="builder-become-options" style="display: none; margin-bottom: 15px;">
                    <div class="form-row">
                        <div class="form-group">
                            <label>Пользователь sudo</label>
                            <input type="text" id="builder-playbook-become-user" placeholder="root">
                        </div>
                        <div class="form-group">
                            <label>Метод повышения прав</label>
                            <select id="builder-playbook-become-method">
                                <option value="">По умолчанию</option>
                                <option value="sudo">sudo</option>
                                <option value="su">su</option>
                                <option value="pbrun">pbrun</option>
                                <option value="pfexec">pfexec</option>
                                <option value="doas">doas</option>
                                <option value="dzdo">dzdo</option>
                                <option value="ksu">ksu</option>
                                <option value="runas">runas</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Стратегия выполнения</label>
                    <select id="builder-playbook-strategy">
                        <option value="">По умолчанию (linear)</option>
                        <option value="linear">linear</option>
                        <option value="free">free</option>
                        <option value="host_pinned">host_pinned</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Максимальное количество параллельных хостов</label>
                    <input type="number" id="builder-playbook-forks" placeholder="5" min="1">
                </div>
                <div class="form-group">
                    <label>Теги (через запятую)</label>
                    <input type="text" id="builder-playbook-tags" placeholder="install,config">
                </div>
                <div class="form-group">
                    <label>Переменные (YAML формат, одна переменная на строку)</label>
                    <textarea id="builder-playbook-vars" rows="4" placeholder="package_name: nginx&#10;port: 80&#10;enabled: true"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label><input type="checkbox" id="builder-playbook-ignore-errors"> Игнорировать ошибки</label>
                    </div>
                    <div class="form-group">
                        <label><input type="checkbox" id="builder-playbook-any-errors-fatal"> Любая ошибка фатальна</label>
                    </div>
                </div>
                <div class="form-group">
                    <label>Ограничение хостов (limit)</label>
                    <input type="text" id="builder-playbook-limit" placeholder="webservers:!debian">
                </div>
                <div id="builder-tasks-container">
                    <h4 style="margin: 20px 0 10px 0;">Задачи</h4>
                    <div id="builder-tasks-list"></div>
                    <button type="button" class="btn btn-secondary btn-sm" onclick="addTaskModule()">+ Добавить задачу</button>
                </div>
                <div id="builder-handlers-container" style="margin-top: 20px;">
                    <h4 style="margin: 20px 0 10px 0;">Обработчики (Handlers) <span style="font-size: 12px; color: #718096;">(опционально)</span></h4>
                    <div id="builder-handlers-list"></div>
                    <button type="button" class="btn btn-secondary btn-sm" onclick="addHandler()">+ Добавить обработчик</button>
                </div>
                <div id="builder-pre-tasks-container" style="margin-top: 20px;">
                    <h4 style="margin: 20px 0 10px 0;">Pre-tasks <span style="font-size: 12px; color: #718096;">(опционально)</span></h4>
                    <div id="builder-pre-tasks-list"></div>
                    <button type="button" class="btn btn-secondary btn-sm" onclick="addPreTask()">+ Добавить pre-task</button>
                </div>
                <div id="builder-post-tasks-container" style="margin-top: 20px;">
                    <h4 style="margin: 20px 0 10px 0;">Post-tasks <span style="font-size: 12px; color: #718096;">(опционально)</span></h4>
                    <div id="builder-post-tasks-list"></div>
                    <button type="button" class="btn btn-secondary btn-sm" onclick="addPostTask()">+ Добавить post-task</button>
                </div>
                <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
                    <button type="button" class="btn btn-secondary" onclick="closePlaybookBuilderModal()">Отмена</button>
                    <button type="button" class="btn btn-primary" onclick="previewPlaybook()">Предпросмотр</button>
                    <button type="submit" class="btn btn-success">Создать</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модальное окно конструктора инвентори -->
    <div id="inventory-builder-modal" class="modal">
        <div class="modal-content" style="max-width: 1000px;">
            <div class="modal-header">
                <h3>Конструктор инвентори</h3>
                <button class="close-btn" onclick="closeInventoryBuilderModal()">&times;</button>
            </div>
            <form id="inventory-builder-form">
                <div class="form-group">
                    <label>Название инвентори</label>
                    <input type="text" id="builder-inventory-name" required>
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <input type="text" id="builder-inventory-description">
                </div>
                <div class="form-group">
                    <label>Тип</label>
                    <select id="builder-inventory-type">
                        <option value="ini">INI</option>
                        <option value="yaml">YAML</option>
                    </select>
                </div>
                <div id="builder-groups-container">
                    <h4 style="margin: 20px 0 10px 0;">Группы хостов</h4>
                    <div id="builder-groups-list"></div>
                    <button type="button" class="btn btn-secondary btn-sm" onclick="addGroup()">+ Добавить группу</button>
                </div>
                <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;">
                    <button type="button" class="btn btn-secondary" onclick="closeInventoryBuilderModal()">Отмена</button>
                    <button type="button" class="btn btn-primary" onclick="previewInventory()">Предпросмотр</button>
                    <button type="submit" class="btn btn-success">Создать</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        let currentPlaybookName = null;
        let currentInventoryName = null;
        let currentRunId = null;
        let logWebSocket = null;

        // Переключение вкладок
        function switchTab(tabName, eventElement = null) {
            // Обновляем вкладки в главном меню
            const mainTabs = document.querySelectorAll('#main-tabs .tab');
            mainTabs.forEach(tab => {
                tab.classList.remove('active');
                const tabData = tab.getAttribute('data-tab');
                if (tabData === tabName) {
                    tab.classList.add('active');
                }
            });
            
            // Обновляем контент вкладок
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
            
            // Если передан элемент события, используем его (для обратной совместимости)
            if (eventElement) {
                eventElement.classList.add('active');
            }
            
            document.getElementById(tabName + '-tab').classList.add('active');
            
            if (tabName === 'playbooks') loadPlaybooks();
            if (tabName === 'inventories') loadInventories();
            if (tabName === 'runs') loadRuns();
        }

        // Обновление статистики в header
        async function updateStats() {
            try {
                const statPlaybooks = document.getElementById('stat-playbooks');
                const statInventories = document.getElementById('stat-inventories');
                const statRuns = document.getElementById('stat-runs');
                
                if (!statPlaybooks || !statInventories || !statRuns) {
                    console.warn('Stats elements not found, skipping update');
                    return;
                }
                
                const [playbooksData, inventoriesData, runsData] = await Promise.all([
                    apiCall('GET', '/api/playbooks'),
                    apiCall('GET', '/api/inventories'),
                    apiCall('GET', '/api/runs')
                ]);
                
                statPlaybooks.textContent = playbooksData.playbooks?.length || 0;
                statInventories.textContent = inventoriesData.inventories?.length || 0;
                statRuns.textContent = runsData.runs?.length || 0;
            } catch (error) {
                console.error('Error updating stats:', error);
                // Устанавливаем значения по умолчанию при ошибке
                const statPlaybooks = document.getElementById('stat-playbooks');
                const statInventories = document.getElementById('stat-inventories');
                const statRuns = document.getElementById('stat-runs');
                
                if (statPlaybooks) statPlaybooks.textContent = '-';
                if (statInventories) statInventories.textContent = '-';
                if (statRuns) statRuns.textContent = '-';
            }
        }

        // API функции
        async function apiCall(method, url, data = null) {
            console.log(`API Call: ${method} ${url}`, data ? { data } : '');
            const options = {
                method,
                headers: { 'Content-Type': 'application/json' }
            };
            if (data) options.body = JSON.stringify(data);
            try {
                const response = await fetch(url, options);
                console.log(`Response status: ${response.status} ${response.statusText}`);
                if (!response.ok) {
                    let errorData;
                    try {
                        errorData = await response.json();
                    } catch (e) {
                        errorData = { detail: `HTTP ${response.status}: ${response.statusText}` };
                    }
                    console.error('API Error:', errorData);
                    throw new Error(errorData.detail || `HTTP ${response.status}: ${response.statusText}`);
                }
                const result = await response.json();
                console.log('API Response:', result);
                return result;
            } catch (error) {
                console.error('API Call Error:', error);
                throw error;
            }
        }

        // Плейбуки
        let isLoadingPlaybooks = false;
        async function loadPlaybooks() {
            // Предотвращаем множественные одновременные загрузки
            if (isLoadingPlaybooks) {
                console.log('[PLAYBOOKS] Already loading, skipping...');
                return;
            }
            
            isLoadingPlaybooks = true;
            const list = document.getElementById('playbooks-list');
            
            try {
                // Показываем индикатор загрузки
                list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">⏳</div><p>Загрузка плейбуков...</p></div>';
                
                const data = await apiCall('GET', '/api/playbooks');
                
                if (data.playbooks.length === 0) {
                    list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📝</div><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Нет плейбуков</p><p>Создайте первый плейбук используя конструктор или вручную</p></div>';
                    isLoadingPlaybooks = false;
                    return;
                }
                
                list.innerHTML = data.playbooks.map((pb, idx) => `
                    <div class="list-item" data-playbook-name="${pb.name.replace(/"/g, '&quot;')}">
                        <div class="list-item-info">
                            <div class="list-item-name">${pb.name}</div>
                            <div class="list-item-meta">
                                <span class="meta-item">
                                    <strong>Размер:</strong> ${(pb.size / 1024).toFixed(2)} KB
                                </span>
                                <span class="meta-item">
                                    <strong>Изменен:</strong> ${new Date(pb.modified).toLocaleString('ru')}
                                </span>
                                ${pb.description ? `<span class="meta-item"><strong>Описание:</strong> ${pb.description}</span>` : ''}
                                ${pb.tags ? `<span class="meta-item"><strong>Теги:</strong> ${pb.tags}</span>` : ''}
                            </div>
                        </div>
                        <div class="list-item-actions">
                            <button class="btn btn-secondary btn-sm playbook-edit-btn" data-name="${encodeURIComponent(pb.name)}">
                                Редактировать
                            </button>
                            <button class="btn btn-danger btn-sm playbook-delete-btn" data-name="${encodeURIComponent(pb.name)}">
                                Удалить
                            </button>
                        </div>
                    </div>
                `).join('');
                
                // Используем делегирование событий на уровне списка для максимальной надежности
                // Удаляем старый обработчик если есть
                if (list._playbookListHandler) {
                    list.removeEventListener('click', list._playbookListHandler);
                }
                
                const listClickHandler = function(e) {
                    // Ищем ближайшую кнопку с классом delete или edit
                    let btn = e.target;
                    let isDelete = false;
                    let isEdit = false;
                    
                    // Проверяем, кликнули ли на кнопку или на элемент внутри кнопки
                    while (btn && btn !== list) {
                        if (btn.classList && btn.classList.contains('playbook-delete-btn')) {
                            isDelete = true;
                            break;
                        }
                        if (btn.classList && btn.classList.contains('playbook-edit-btn')) {
                            isEdit = true;
                            break;
                        }
                        btn = btn.parentElement;
                    }
                    
                    if (!btn || btn === list) return;
                    
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const name = decodeURIComponent(btn.getAttribute('data-name') || '');
                    console.log('[PLAYBOOKS] List click handler:', { 
                        isDelete, 
                        isEdit, 
                        name, 
                        target: e.target, 
                        button: btn 
                    });
                    
                    if (isDelete && name) {
                        console.log('[PLAYBOOKS] Delete action triggered for:', name);
                        if (typeof deletePlaybook === 'function') {
                            deletePlaybook(name);
                        } else {
                            console.error('[PLAYBOOKS] deletePlaybook function not found!');
                        }
                    } else if (isEdit && name) {
                        console.log('[PLAYBOOKS] Edit action triggered for:', name);
                        if (typeof editPlaybook === 'function') {
                            editPlaybook(name);
                        } else {
                            console.error('[PLAYBOOKS] editPlaybook function not found!');
                        }
                    }
                };
                
                list._playbookListHandler = listClickHandler;
                list.addEventListener('click', listClickHandler, true); // Capture фаза
                
                const deleteButtons = list.querySelectorAll('.playbook-delete-btn');
                const editButtons = list.querySelectorAll('.playbook-edit-btn');
                console.log('[PLAYBOOKS] Loaded', data.playbooks.length, 'playbooks, found', deleteButtons.length, 'delete buttons and', editButtons.length, 'edit buttons');
                
                isLoadingPlaybooks = false;
                updateStats();
            } catch (error) {
                console.error('[PLAYBOOKS] Error loading playbooks:', error);
                const list = document.getElementById('playbooks-list');
                list.innerHTML = `<div class="empty-state"><div class="empty-state-icon">❌</div><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Ошибка загрузки</p><p>${error.message}</p><button class="btn btn-primary" onclick="loadPlaybooks()" style="margin-top: 10px;">Повторить</button></div>`;
                isLoadingPlaybooks = false;
            }
        }

        function openPlaybookModal(name = null) {
            currentPlaybookName = name;
            const modal = document.getElementById('playbook-modal');
            const title = document.getElementById('playbook-modal-title');
            const form = document.getElementById('playbook-form');
            const nameInput = document.getElementById('playbook-name');
            const contentInput = document.getElementById('playbook-content');
            
            if (name) {
                title.textContent = 'Редактировать плейбук';
                nameInput.disabled = true;
                nameInput.value = name;
                apiCall('GET', `/api/playbooks/${name}`).then(data => {
                    contentInput.value = data.content;
                    document.getElementById('playbook-description').value = data.description || '';
                });
            } else {
                title.textContent = 'Создать плейбук';
                nameInput.disabled = false;
                form.reset();
            }
            
            modal.classList.add('active');
        }

        function closePlaybookModal() {
            document.getElementById('playbook-modal').classList.remove('active');
            currentPlaybookName = null;
        }

        document.getElementById('playbook-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const name = document.getElementById('playbook-name').value;
            const content = document.getElementById('playbook-content').value;
            const description = document.getElementById('playbook-description').value;
            
            try {
                if (currentPlaybookName) {
                    await apiCall('PUT', `/api/playbooks/${currentPlaybookName}`, { content, description });
                } else {
                    await apiCall('POST', '/api/playbooks', { name, content, description });
                }
                closePlaybookModal();
                loadPlaybooks();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

        async function editPlaybook(name) {
            openPlaybookModal(name);
        }

        async function deletePlaybook(name) {
            console.log('deletePlaybook called with name:', name);
            if (!confirm(`Удалить плейбук "${name}"?`)) {
                console.log('Delete cancelled by user');
                return;
            }
            try {
                console.log('Attempting to delete playbook:', name);
                // Кодируем имя для URL
                const encodedName = encodeURIComponent(name);
                console.log('Encoded name:', encodedName);
                const result = await apiCall('DELETE', `/api/playbooks/${encodedName}`);
                console.log('Delete result:', result);
                loadPlaybooks();
            } catch (error) {
                console.error('Error deleting playbook:', error);
                alert('Ошибка при удалении плейбука: ' + error.message);
            }
        }

        // Инвентори
        async function loadInventories() {
            try {
                const data = await apiCall('GET', '/api/inventories');
                const list = document.getElementById('inventories-list');
                
                if (data.inventories.length === 0) {
                    list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📋</div><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Нет инвентори</p><p>Создайте первый инвентори используя конструктор или вручную</p></div>';
                    return;
                }
                
                list.innerHTML = data.inventories.map((inv, idx) => `
                    <div class="list-item" data-inventory-name="${inv.name.replace(/"/g, '&quot;')}">
                        <div class="list-item-info">
                            <div class="list-item-name">${inv.name} <span style="color: #718096; font-size: 12px;">(${inv.type.toUpperCase()})</span></div>
                            <div class="list-item-meta">Размер: ${(inv.size / 1024).toFixed(2)} KB | Изменен: ${new Date(inv.modified).toLocaleString('ru')}</div>
                        </div>
                        <div class="list-item-actions">
                            <button class="btn btn-primary btn-sm inventory-edit-btn" data-name="${encodeURIComponent(inv.name)}">
                                <span>✏️</span> Редактировать
                            </button>
                            <button class="btn btn-danger btn-sm inventory-delete-btn" data-name="${encodeURIComponent(inv.name)}">
                                <span>🗑️</span> Удалить
                            </button>
                        </div>
                    </div>
                `).join('');
                
                // Используем делегирование событий на уровне списка для максимальной надежности
                // Удаляем старый обработчик если есть
                if (list._inventoryListHandler) {
                    list.removeEventListener('click', list._inventoryListHandler);
                }
                
                const listClickHandler = function(e) {
                    // Ищем ближайшую кнопку с классом delete или edit
                    let btn = e.target;
                    let isDelete = false;
                    let isEdit = false;
                    
                    // Проверяем, кликнули ли на кнопку или на элемент внутри кнопки
                    while (btn && btn !== list) {
                        if (btn.classList && btn.classList.contains('inventory-delete-btn')) {
                            isDelete = true;
                            break;
                        }
                        if (btn.classList && btn.classList.contains('inventory-edit-btn')) {
                            isEdit = true;
                            break;
                        }
                        btn = btn.parentElement;
                    }
                    
                    if (!btn || btn === list) return;
                    
                    // Предотвращаем множественные обработки одного клика
                    if (btn._processing) {
                        e.preventDefault();
                        e.stopPropagation();
                        return;
                    }
                    
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const name = decodeURIComponent(btn.getAttribute('data-name') || '');
                    console.log('[INVENTORIES] List click handler:', { 
                        isDelete, 
                        isEdit, 
                        name, 
                        target: e.target, 
                        button: btn 
                    });
                    
                    if (isDelete && name) {
                        console.log('[INVENTORIES] Delete action triggered for:', name);
                        btn._processing = true;
                        setTimeout(() => { btn._processing = false; }, 1000);
                        if (typeof deleteInventory === 'function') {
                            deleteInventory(name);
                        } else {
                            console.error('[INVENTORIES] deleteInventory function not found!');
                            btn._processing = false;
                        }
                    } else if (isEdit && name) {
                        console.log('[INVENTORIES] Edit action triggered for:', name);
                        if (typeof editInventory === 'function') {
                            editInventory(name);
                        } else {
                            console.error('[INVENTORIES] editInventory function not found!');
                        }
                    }
                };
                
                list._inventoryListHandler = listClickHandler;
                list.addEventListener('click', listClickHandler, true); // Capture фаза
                
                const deleteButtons = list.querySelectorAll('.inventory-delete-btn');
                const editButtons = list.querySelectorAll('.inventory-edit-btn');
                console.log('[INVENTORIES] Loaded', data.inventories.length, 'inventories, found', deleteButtons.length, 'delete buttons and', editButtons.length, 'edit buttons');
                updateStats();
            } catch (error) {
                document.getElementById('inventories-list').innerHTML = `<div class="empty-state">Ошибка: ${error.message}</div>`;
            }
        }

        function openInventoryModal(name = null) {
            currentInventoryName = name;
            const modal = document.getElementById('inventory-modal');
            const title = document.getElementById('inventory-modal-title');
            const form = document.getElementById('inventory-form');
            const nameInput = document.getElementById('inventory-name');
            const typeInput = document.getElementById('inventory-type');
            const contentInput = document.getElementById('inventory-content');
            
            if (name) {
                title.textContent = 'Редактировать инвентори';
                nameInput.disabled = true;
                nameInput.value = name;
                apiCall('GET', `/api/inventories/${name}`).then(data => {
                    contentInput.value = data.content;
                    typeInput.value = data.type;
                    document.getElementById('inventory-description').value = data.description || '';
                });
            } else {
                title.textContent = 'Создать инвентори';
                nameInput.disabled = false;
                form.reset();
            }
            
            modal.classList.add('active');
        }

        function closeInventoryModal() {
            document.getElementById('inventory-modal').classList.remove('active');
            currentInventoryName = null;
        }

        document.getElementById('inventory-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const name = document.getElementById('inventory-name').value;
            const type = document.getElementById('inventory-type').value;
            const content = document.getElementById('inventory-content').value;
            const description = document.getElementById('inventory-description').value;
            
            try {
                if (currentInventoryName) {
                    await apiCall('PUT', `/api/inventories/${currentInventoryName}`, { content, inventory_type: type, description });
                } else {
                    await apiCall('POST', '/api/inventories', { name, content, inventory_type: type, description });
                }
                closeInventoryModal();
                loadInventories();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

        async function editInventory(name) {
            openInventoryModal(name);
        }

        // Флаг для предотвращения множественных подтверждений
        let deletingInventory = false;
        
        async function deleteInventory(name) {
            // Предотвращаем множественные вызовы
            if (deletingInventory) {
                console.log('Delete already in progress');
                return;
            }
            
            console.log('deleteInventory called with name:', name);
            if (!confirm(`Удалить инвентори "${name}"?`)) {
                console.log('Delete cancelled by user');
                return;
            }
            
            deletingInventory = true;
            try {
                console.log('Attempting to delete inventory:', name);
                // Кодируем имя для URL
                const encodedName = encodeURIComponent(name);
                console.log('Encoded name:', encodedName);
                const result = await apiCall('DELETE', `/api/inventories/${encodedName}`);
                console.log('Delete result:', result);
                loadInventories();
            } catch (error) {
                console.error('Error deleting inventory:', error);
                alert('Ошибка при удалении инвентори: ' + error.message);
            } finally {
                deletingInventory = false;
            }
        }

        // Запуски
        async function loadRuns() {
            try {
                const data = await apiCall('GET', '/api/runs');
                const list = document.getElementById('runs-list');
                
                if (data.runs.length === 0) {
                    list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">▶️</div><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Нет запусков</p><p>Запустите плейбук для просмотра истории выполнения</p></div>';
                    return;
                }
                
                list.innerHTML = data.runs.map(run => {
                    const statusClass = `status-${run.status}`;
                    const canRetry = run.status === 'failed' || run.status === 'success' || run.status === 'cancelled';
                    return `
                        <div class="list-item">
                            <div class="list-item-info">
                                <div class="list-item-name">
                                    ${run.playbook_name || 'Unknown'}
                                    ${run.inventory_name ? ` <span style="color: #718096;">→ ${run.inventory_name}</span>` : ''}
                                    <span class="status-badge ${statusClass}">${run.status}</span>
                                </div>
                                <div class="list-item-meta">
                                    Создан: ${new Date(run.created_at).toLocaleString('ru')}
                                    ${run.finished_at ? `| Завершен: ${new Date(run.finished_at).toLocaleString('ru')}` : ''}
                                </div>
                            </div>
                            <div class="list-item-actions">
                                <button class="btn btn-primary btn-sm" onclick="viewRunLog('${run.id}')">
                                    <span>📄</span> Лог
                                </button>
                                ${canRetry ? `<button class="btn btn-success btn-sm" onclick="retryRun('${run.id}')">
                                    <span>🔄</span> Повторить
                                </button>` : ''}
                            </div>
                        </div>
                    `;
                }).join('');
            } catch (error) {
                document.getElementById('runs-list').innerHTML = `<div class="empty-state">Ошибка: ${error.message}</div>`;
            }
        }

        async function openRunModal() {
            // Загружаем списки плейбуков и инвентори
            const playbooks = await apiCall('GET', '/api/playbooks');
            const inventories = await apiCall('GET', '/api/inventories');
            
            const playbookSelect = document.getElementById('run-playbook');
            const inventorySelect = document.getElementById('run-inventory');
            
            playbookSelect.innerHTML = playbooks.playbooks.map(pb => 
                `<option value="${pb.name}">${pb.name}</option>`
            ).join('');
            
            inventorySelect.innerHTML = '<option value="">Без инвентори</option>' + 
                inventories.inventories.map(inv => 
                    `<option value="${inv.name}">${inv.name} (${inv.type})</option>`
                ).join('');
            
            document.getElementById('run-modal').classList.add('active');
        }

        function closeRunModal() {
            document.getElementById('run-modal').classList.remove('active');
            document.getElementById('run-form').reset();
        }

        document.getElementById('run-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const playbook = document.getElementById('run-playbook').value;
            const inventory = document.getElementById('run-inventory').value;
            const checkMode = document.getElementById('run-check-mode').checked;
            const diffMode = document.getElementById('run-diff-mode').checked;
            const limit = document.getElementById('run-limit').value;
            const tags = document.getElementById('run-tags').value.split(',').filter(t => t.trim());
            const skipTags = document.getElementById('run-skip-tags').value.split(',').filter(t => t.trim());
            
            try {
                const runData = {
                    playbook_name: playbook,
                    inventory_name: inventory || null,
                    check_mode: checkMode,
                    diff_mode: diffMode,
                    limit: limit || null,
                    tags: tags.length > 0 ? tags : null,
                    skip_tags: skipTags.length > 0 ? skipTags : null
                };
                
                const result = await apiCall('POST', '/api/runs', runData);
                closeRunModal();
                loadRuns();
                viewRunLog(result.run_id);
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

        function viewRunLog(runId) {
            currentRunId = runId;
            const modal = document.getElementById('log-modal');
            const logContent = document.getElementById('log-content');
            
            modal.classList.add('active');
            logContent.textContent = 'Подключение...';
            
            // Подключаемся к WebSocket
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}/ws/runs/${runId}`;
            
            if (logWebSocket) {
                logWebSocket.close();
            }
            
            logWebSocket = new WebSocket(wsUrl);
            logContent.textContent = '';
            
            logWebSocket.onmessage = (event) => {
                const data = JSON.parse(event.data);
                if (data.type === 'log') {
                    logContent.textContent += data.data;
                    logContent.scrollTop = logContent.scrollHeight;
                } else if (data.type === 'status') {
                    // Можно обновить статус в UI
                }
            };
            
            logWebSocket.onerror = () => {
                logContent.textContent = 'Ошибка подключения. Загрузка лога...';
                // Пробуем загрузить лог через API
                apiCall('GET', `/api/runs/${runId}`).then(run => {
                    if (run.log) {
                        logContent.textContent = run.log;
                    }
                });
            };
            
            // Также загружаем текущий лог через API
            apiCall('GET', `/api/runs/${runId}`).then(run => {
                if (run.log) {
                    logContent.textContent = run.log;
                    logContent.scrollTop = logContent.scrollHeight;
                }
            });
        }

        function closeLogModal() {
            document.getElementById('log-modal').classList.remove('active');
            if (logWebSocket) {
                logWebSocket.close();
                logWebSocket = null;
            }
            currentRunId = null;
        }

        async function retryRun(runId) {
            if (!confirm('Повторить запуск с теми же параметрами?')) {
                return;
            }
            try {
                const result = await apiCall('POST', `/api/runs/${runId}/retry`);
                loadRuns();
                // Открываем лог нового запуска
                setTimeout(() => {
                    viewRunLog(result.run_id);
                }, 500);
            } catch (error) {
                console.error('Error retrying run:', error);
                alert('Ошибка при повторе запуска: ' + error.message);
            }
        }

        // Закрытие модальных окон по клику вне их
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.classList.remove('active');
                }
            });
        });

        // Конструктор плейбуков
        let availableModules = {};
        let taskModules = [];
        let handlerModules = [];
        let preTaskModules = [];
        let postTaskModules = [];
        let inventoryGroups = [];

        async function loadModules() {
            try {
                const data = await apiCall('GET', '/api/builders/modules');
                availableModules = data.modules;
            } catch (error) {
                console.error('Ошибка загрузки модулей:', error);
            }
        }

        function openPlaybookBuilderModal() {
            document.getElementById('playbook-builder-modal').classList.add('active');
            taskModules = [];
            handlerModules = [];
            preTaskModules = [];
            postTaskModules = [];
            updateTasksList();
            if (Object.keys(availableModules).length === 0) {
                loadModules();
            }
            // Показываем/скрываем become опции
            document.getElementById('builder-playbook-become').addEventListener('change', function() {
                document.getElementById('builder-become-options').style.display = this.checked ? 'block' : 'none';
            });
        }

        // Предустановленные шаблоны
        function loadPlaybookTemplate() {
            const template = document.getElementById('builder-playbook-template').value;
            if (!template) return;
            
            const templates = {
                'install_package': {
                    name: 'Установка пакета',
                    description: 'Установка пакета через apt',
                    hosts: 'all',
                    become: true,
                    tasks: [{module: 'apt', params: {package_name: 'nginx', package_state: 'present', update_cache: true}}]
                },
                'configure_service': {
                    name: 'Настройка сервиса',
                    description: 'Установка и настройка сервиса',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'nginx', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'nginx', service_state: 'started', enabled: true}}
                    ]
                },
                'deploy_app': {
                    name: 'Развертывание приложения',
                    description: 'Копирование файлов и настройка приложения',
                    hosts: 'webservers',
                    become: true,
                    tasks: [
                        {module: 'copy', params: {src: '/path/to/app', dest: '/var/www/app'}},
                        {module: 'service', params: {service_name: 'app', service_state: 'restarted'}}
                    ]
                },
                'backup': {
                    name: 'Резервное копирование',
                    description: 'Создание резервной копии',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'command', params: {command: 'tar -czf /backup/backup.tar.gz /data'}}
                    ]
                },
                'update_system': {
                    name: 'Обновление системы',
                    description: 'Обновление системы и пакетов',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {update_cache: true}},
                        {module: 'apt', params: {package_name: '{{ item }}', package_state: 'latest'}, loop: 'packages'}
                    ]
                },
                'docker_setup': {
                    name: 'Настройка Docker',
                    description: 'Установка и настройка Docker',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'docker.io', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'docker', service_state: 'started', enabled: true}}
                    ]
                },
                // Контейнеризация
                'docker_compose': {
                    name: 'Docker Compose',
                    description: 'Установка Docker Compose и запуск контейнеров',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'docker-compose', package_state: 'present'}},
                        {module: 'command', params: {command: 'docker-compose up -d'}}
                    ]
                },
                'podman_setup': {
                    name: 'Настройка Podman',
                    description: 'Установка и настройка Podman',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'podman', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'podman', service_state: 'started', enabled: true}}
                    ]
                },
                // Kubernetes
                'k8s_deploy': {
                    name: 'Развертывание в Kubernetes',
                    description: 'Развертывание приложения в Kubernetes',
                    hosts: 'k8s_master',
                    become: true,
                    tasks: [
                        {module: 'command', params: {command: 'kubectl apply -f deployment.yaml'}}
                    ]
                },
                'k8s_configmap': {
                    name: 'Создание ConfigMap',
                    description: 'Создание ConfigMap в Kubernetes',
                    hosts: 'k8s_master',
                    become: true,
                    tasks: [
                        {module: 'command', params: {command: 'kubectl create configmap app-config --from-literal=key=value'}}
                    ]
                },
                'k8s_secret': {
                    name: 'Создание Secret',
                    description: 'Создание Secret в Kubernetes',
                    hosts: 'k8s_master',
                    become: true,
                    tasks: [
                        {module: 'command', params: {command: 'kubectl create secret generic app-secret --from-literal=password=secret'}}
                    ]
                },
                // CI/CD
                'jenkins_setup': {
                    name: 'Настройка Jenkins',
                    description: 'Установка и настройка Jenkins',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'jenkins', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'jenkins', service_state: 'started', enabled: true}},
                        {module: 'command', params: {command: 'systemctl status jenkins'}}
                    ]
                },
                'gitlab_runner': {
                    name: 'Настройка GitLab Runner',
                    description: 'Установка и регистрация GitLab Runner',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'gitlab-runner', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'gitlab-runner', service_state: 'started', enabled: true}}
                    ]
                },
                'github_actions': {
                    name: 'GitHub Actions подготовка',
                    description: 'Подготовка сервера для GitHub Actions',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'user', params: {name: 'github-actions', groups: 'sudo', shell: '/bin/bash'}},
                        {module: 'authorized_key', params: {user: 'github-actions', key: '{{ github_public_key }}'}}
                    ]
                },
                // Веб-серверы
                'nginx_setup': {
                    name: 'Настройка Nginx',
                    description: 'Установка и настройка Nginx',
                    hosts: 'webservers',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'nginx', package_state: 'present'}},
                        {module: 'template', params: {src: 'nginx.conf.j2', dest: '/etc/nginx/nginx.conf'}},
                        {module: 'service', params: {service_name: 'nginx', service_state: 'restarted', enabled: true}}
                    ]
                },
                'apache_setup': {
                    name: 'Настройка Apache',
                    description: 'Установка и настройка Apache',
                    hosts: 'webservers',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'apache2', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'apache2', service_state: 'started', enabled: true}}
                    ]
                },
                'load_balancer': {
                    name: 'Настройка Load Balancer',
                    description: 'Настройка HAProxy для балансировки нагрузки',
                    hosts: 'loadbalancers',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'haproxy', package_state: 'present'}},
                        {module: 'template', params: {src: 'haproxy.cfg.j2', dest: '/etc/haproxy/haproxy.cfg'}},
                        {module: 'service', params: {service_name: 'haproxy', service_state: 'restarted', enabled: true}}
                    ]
                },
                // Базы данных
                'postgres_setup': {
                    name: 'Настройка PostgreSQL',
                    description: 'Установка и настройка PostgreSQL',
                    hosts: 'dbservers',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'postgresql', package_state: 'present'}},
                        {module: 'postgresql_user', params: {name: 'app_user', password: '{{ db_password }}', priv: 'app_db:ALL'}},
                        {module: 'service', params: {service_name: 'postgresql', service_state: 'started', enabled: true}}
                    ]
                },
                'mysql_setup': {
                    name: 'Настройка MySQL',
                    description: 'Установка и настройка MySQL',
                    hosts: 'dbservers',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'mysql-server', package_state: 'present'}},
                        {module: 'mysql_user', params: {name: 'app_user', password: '{{ db_password }}', priv: 'app_db.*:ALL'}},
                        {module: 'service', params: {service_name: 'mysql', service_state: 'started', enabled: true}}
                    ]
                },
                'redis_setup': {
                    name: 'Настройка Redis',
                    description: 'Установка и настройка Redis',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'redis-server', package_state: 'present'}},
                        {module: 'template', params: {src: 'redis.conf.j2', dest: '/etc/redis/redis.conf'}},
                        {module: 'service', params: {service_name: 'redis', service_state: 'restarted', enabled: true}}
                    ]
                },
                'mongodb_setup': {
                    name: 'Настройка MongoDB',
                    description: 'Установка и настройка MongoDB',
                    hosts: 'dbservers',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'mongodb', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'mongodb', service_state: 'started', enabled: true}}
                    ]
                },
                // Мониторинг
                'prometheus_setup': {
                    name: 'Настройка Prometheus',
                    description: 'Установка и настройка Prometheus',
                    hosts: 'monitoring',
                    become: true,
                    tasks: [
                        {module: 'user', params: {name: 'prometheus', system: true, shell: '/bin/false'}},
                        {module: 'unarchive', params: {src: 'https://github.com/prometheus/prometheus/releases/download/v2.40.0/prometheus-2.40.0.linux-amd64.tar.gz', dest: '/opt', remote_src: true}},
                        {module: 'service', params: {service_name: 'prometheus', service_state: 'started', enabled: true}}
                    ]
                },
                'grafana_setup': {
                    name: 'Настройка Grafana',
                    description: 'Установка и настройка Grafana',
                    hosts: 'monitoring',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'grafana', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'grafana-server', service_state: 'started', enabled: true}}
                    ]
                },
                'zabbix_setup': {
                    name: 'Настройка Zabbix',
                    description: 'Установка Zabbix Agent',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'zabbix-agent', package_state: 'present'}},
                        {module: 'template', params: {src: 'zabbix_agentd.conf.j2', dest: '/etc/zabbix/zabbix_agentd.conf'}},
                        {module: 'service', params: {service_name: 'zabbix-agent', service_state: 'restarted', enabled: true}}
                    ]
                },
                // Логирование
                'elk_setup': {
                    name: 'Настройка ELK Stack',
                    description: 'Установка Elasticsearch, Logstash и Kibana',
                    hosts: 'logging',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'elasticsearch', package_state: 'present'}},
                        {module: 'apt', params: {package_name: 'logstash', package_state: 'present'}},
                        {module: 'apt', params: {package_name: 'kibana', package_state: 'present'}},
                        {module: 'service', params: {service_name: 'elasticsearch', service_state: 'started', enabled: true}},
                        {module: 'service', params: {service_name: 'logstash', service_state: 'started', enabled: true}},
                        {module: 'service', params: {service_name: 'kibana', service_state: 'started', enabled: true}}
                    ]
                },
                'fluentd_setup': {
                    name: 'Настройка Fluentd',
                    description: 'Установка и настройка Fluentd',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'td-agent', package_state: 'present'}},
                        {module: 'template', params: {src: 'td-agent.conf.j2', dest: '/etc/td-agent/td-agent.conf'}},
                        {module: 'service', params: {service_name: 'td-agent', service_state: 'restarted', enabled: true}}
                    ]
                },
                'loki_setup': {
                    name: 'Настройка Loki',
                    description: 'Установка и настройка Loki для сбора логов',
                    hosts: 'logging',
                    become: true,
                    tasks: [
                        {module: 'unarchive', params: {src: 'https://github.com/grafana/loki/releases/download/v2.8.0/loki-linux-amd64.zip', dest: '/opt/loki', remote_src: true}},
                        {module: 'service', params: {service_name: 'loki', service_state: 'started', enabled: true}}
                    ]
                },
                // Безопасность
                'firewall_setup': {
                    name: 'Настройка Firewall',
                    description: 'Настройка UFW firewall',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'ufw', package_state: 'present'}},
                        {module: 'ufw', params: {rule: 'allow', port: '22', proto: 'tcp'}},
                        {module: 'ufw', params: {rule: 'allow', port: '80', proto: 'tcp'}},
                        {module: 'ufw', params: {rule: 'allow', port: '443', proto: 'tcp'}},
                        {module: 'ufw', params: {state: 'enabled'}}
                    ]
                },
                'ssl_cert': {
                    name: 'Установка SSL сертификата',
                    description: 'Установка SSL сертификата через Let\'s Encrypt',
                    hosts: 'webservers',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'certbot', package_state: 'present'}},
                        {module: 'command', params: {command: 'certbot --nginx -d example.com -d www.example.com --non-interactive --agree-tos --email admin@example.com'}}
                    ]
                },
                'fail2ban_setup': {
                    name: 'Настройка Fail2ban',
                    description: 'Установка и настройка Fail2ban для защиты от брутфорса',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'fail2ban', package_state: 'present'}},
                        {module: 'template', params: {src: 'jail.local.j2', dest: '/etc/fail2ban/jail.local'}},
                        {module: 'service', params: {service_name: 'fail2ban', service_state: 'restarted', enabled: true}}
                    ]
                },
                'ssh_hardening': {
                    name: 'Усиление SSH',
                    description: 'Настройка безопасности SSH',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'lineinfile', params: {path: '/etc/ssh/sshd_config', regexp: '^PermitRootLogin', line: 'PermitRootLogin no'}},
                        {module: 'lineinfile', params: {path: '/etc/ssh/sshd_config', regexp: '^PasswordAuthentication', line: 'PasswordAuthentication no'}},
                        {module: 'lineinfile', params: {path: '/etc/ssh/sshd_config', regexp: '^PubkeyAuthentication', line: 'PubkeyAuthentication yes'}},
                        {module: 'service', params: {service_name: 'sshd', service_state: 'restarted'}}
                    ]
                },
                // Сеть
                'network_config': {
                    name: 'Настройка сети',
                    description: 'Настройка сетевых интерфейсов',
                    hosts: 'all',
                    become: true,
                    tasks: [
                        {module: 'template', params: {src: 'interfaces.j2', dest: '/etc/network/interfaces'}},
                        {module: 'command', params: {command: 'ifdown eth0 && ifup eth0'}}
                    ]
                },
                'vpn_setup': {
                    name: 'Настройка VPN',
                    description: 'Установка и настройка OpenVPN',
                    hosts: 'vpn_servers',
                    become: true,
                    tasks: [
                        {module: 'apt', params: {package_name: 'openvpn', package_state: 'present'}},
                        {module: 'template', params: {src: 'server.conf.j2', dest: '/etc/openvpn/server.conf'}},
                        {module: 'service', params: {service_name: 'openvpn', service_state: 'started', enabled: true}}
                    ]
                }
            };
            
            const tpl = templates[template];
            if (tpl) {
                document.getElementById('builder-playbook-name').value = tpl.name;
                document.getElementById('builder-playbook-description').value = tpl.description;
                document.getElementById('builder-playbook-hosts').value = tpl.hosts;
                document.getElementById('builder-playbook-become').checked = tpl.become || false;
                document.getElementById('builder-become-options').style.display = tpl.become ? 'block' : 'none';
                
                // Очищаем текущие задачи
                taskModules = [];
                document.getElementById('builder-tasks-list').innerHTML = '';
                
                // Добавляем задачи из шаблона
                if (tpl.tasks && tpl.tasks.length > 0) {
                    tpl.tasks.forEach((tm) => {
                        addTaskModule();
                        const tasksList = document.getElementById('builder-tasks-list');
                        const taskDiv = tasksList.lastElementChild;
                        const select = taskDiv.querySelector('select');
                        
                        if (select && tm.module) {
                            // Устанавливаем модуль
                            setTimeout(() => {
                                select.value = tm.module;
                                const changeEvent = new Event('change', { bubbles: true });
                                select.dispatchEvent(changeEvent);
                                
                                // Заполняем параметры после появления полей
                                setTimeout(() => {
                                    Object.keys(tm.params || {}).forEach(key => {
                                        const fieldName = key;
                                        const inputs = taskDiv.querySelectorAll('input, select');
                                        inputs.forEach(input => {
                                            // Пытаемся найти поле по имени или по типу
                                            if (input.type === 'checkbox' && (fieldName === 'update_cache' || fieldName === 'enabled')) {
                                                input.checked = tm.params[key];
                                                input.dispatchEvent(new Event('change'));
                                            } else if (input.type === 'text' || input.type === 'number') {
                                                // Проверяем placeholder или предыдущий label
                                                const label = input.previousElementSibling;
                                                if (label && label.textContent.toLowerCase().includes(fieldName.replace('_', ' ').toLowerCase())) {
                                                    input.value = tm.params[key];
                                                    input.dispatchEvent(new Event('input'));
                                                }
                                            } else if (input.tagName === 'SELECT') {
                                                const label = input.previousElementSibling;
                                                if (label && label.textContent.toLowerCase().includes(fieldName.replace('_', ' ').toLowerCase())) {
                                                    input.value = tm.params[key];
                                                    input.dispatchEvent(new Event('change'));
                                                }
                                            }
                                        });
                                    });
                                }, 200);
                            }, 50);
                        }
                    });
                }
            }
        }

        function closePlaybookBuilderModal() {
            document.getElementById('playbook-builder-modal').classList.remove('active');
            document.getElementById('playbook-builder-form').reset();
            taskModules = [];
            updateTasksList();
        }

        function addTaskModule() {
            const moduleSelect = document.createElement('select');
            moduleSelect.className = 'form-control';
            moduleSelect.style.marginBottom = '10px';
            
            // Добавляем опцию по умолчанию
            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = '-- ВЫБЕРИТЕ МОДУЛЬ --';
            defaultOption.selected = true;
            defaultOption.disabled = true;
            moduleSelect.appendChild(defaultOption);
            
            Object.keys(availableModules).forEach(key => {
                const option = document.createElement('option');
                option.value = key;
                option.textContent = availableModules[key].name;
                moduleSelect.appendChild(option);
            });
            
            const taskDiv = document.createElement('div');
            taskDiv.className = 'task-module-item';
            taskDiv.style.marginBottom = '15px';
            taskDiv.style.padding = '15px';
            taskDiv.style.border = '1px solid #e2e8f0';
            taskDiv.style.borderRadius = '5px';
            
            const taskId = taskModules.length;
            taskModules.push({ module: '', params: {} });
            
            taskDiv.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <strong>Задача ${taskId + 1}</strong>
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeTaskModule(this)">Удалить</button>
                </div>
                <div style="margin-bottom: 10px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: 500;">Модуль:</label>
                </div>
            `;
            
            // Добавляем селект модуля
            const moduleContainer = taskDiv.querySelector('div:last-child');
            moduleSelect.style.width = '100%';
            moduleSelect.style.padding = '8px';
            moduleSelect.style.border = '1px solid #cbd5e0';
            moduleSelect.style.borderRadius = '5px';
            moduleSelect.style.marginBottom = '10px';
            moduleContainer.appendChild(moduleSelect);
            
            // Добавляем контейнер для полей
            const fieldsContainer = document.createElement('div');
            fieldsContainer.className = 'task-fields';
            taskDiv.appendChild(fieldsContainer);
            
            moduleSelect.onchange = function() {
                if (this.value) {
                    taskModules[taskId].module = this.value;
                    updateTaskFields(taskDiv, taskId);
                } else {
                    taskModules[taskId].module = '';
                    const fieldsContainer = taskDiv.querySelector('.task-fields');
                    if (fieldsContainer) fieldsContainer.innerHTML = '';
                }
            };
            
            document.getElementById('builder-tasks-list').appendChild(taskDiv);
        }


        function removeTaskModule(btn) {
            const taskDiv = btn.closest('.task-module-item');
            const index = Array.from(taskDiv.parentNode.children).indexOf(taskDiv);
            taskModules.splice(index, 1);
            taskDiv.remove();
            updateTasksList();
        }
        
        // Обновленная функция updateTaskFields для обычных задач
        function updateTaskFields(taskDiv, taskId) {
            updateTaskFieldsForArray(taskDiv, taskId, taskModules);
        }

        function updateTasksList() {
            // Обновление нумерации
            document.querySelectorAll('.task-module-item').forEach((item, index) => {
                const strong = item.querySelector('strong');
                if (strong) strong.textContent = `Задача ${index + 1}`;
            });
        }

        async function previewPlaybook() {
            const config = getPlaybookBuilderConfig();
            try {
                const result = await apiCall('POST', '/api/builders/playbook', config);
                alert('Плейбук создан! Содержимое:\n\n' + result.content.substring(0, 500) + '...');
                closePlaybookBuilderModal();
                loadPlaybooks();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        }

        function getPlaybookBuilderConfig() {
            const config = {
                name: document.getElementById('builder-playbook-name').value,
                description: document.getElementById('builder-playbook-description').value,
                hosts: document.getElementById('builder-playbook-hosts').value || 'all',
                connection: document.getElementById('builder-playbook-connection').value || null,
                gather_facts: document.getElementById('builder-playbook-gather-facts').checked,
                become: document.getElementById('builder-playbook-become').checked,
                task_modules: taskModules.map((tm, idx) => ({
                    module: tm.module,
                    name: `Task ${idx + 1}`,
                    params: tm.params
                }))
            };
            
            // Become опции
            if (config.become) {
                const becomeUser = document.getElementById('builder-playbook-become-user').value;
                const becomeMethod = document.getElementById('builder-playbook-become-method').value;
                if (becomeUser) config.become_user = becomeUser;
                if (becomeMethod) config.become_method = becomeMethod;
            }
            
            // Стратегия
            const strategy = document.getElementById('builder-playbook-strategy').value;
            if (strategy) config.strategy = strategy;
            
            // Forks
            const forks = document.getElementById('builder-playbook-forks').value;
            if (forks) config.forks = parseInt(forks);
            
            // Теги
            const tags = document.getElementById('builder-playbook-tags').value;
            if (tags) config.tags = tags.split(',').map(t => t.trim()).filter(t => t);
            
            // Переменные
            const varsText = document.getElementById('builder-playbook-vars').value;
            let vars = {};
            
            // Добавляем SSH настройки если выбрано
            if (document.getElementById('builder-playbook-ssh-no-check').checked) {
                vars.ansible_ssh_common_args = '-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null';
            }
            
            if (varsText) {
                try {
                    varsText.split('\n').forEach(line => {
                        line = line.trim();
                        if (line && line.includes(':')) {
                            const [key, ...valueParts] = line.split(':');
                            const value = valueParts.join(':').trim();
                            // Пробуем определить тип
                            if (value === 'true' || value === 'false') {
                                vars[key.trim()] = value === 'true';
                            } else if (!isNaN(value) && value !== '') {
                                vars[key.trim()] = parseFloat(value);
                            } else {
                                vars[key.trim()] = value.replace(/^["']|["']$/g, '');
                            }
                        }
                    });
                } catch (e) {
                    console.error('Ошибка парсинга переменных:', e);
                }
            }
            
            if (Object.keys(vars).length > 0) {
                config.vars = vars;
            }
            
            // Игнорировать ошибки
            if (document.getElementById('builder-playbook-ignore-errors').checked) {
                config.ignore_errors = true;
            }
            
            // Любая ошибка фатальна
            if (document.getElementById('builder-playbook-any-errors-fatal').checked) {
                config.any_errors_fatal = true;
            }
            
            // Limit
            const limit = document.getElementById('builder-playbook-limit').value;
            if (limit) config.limit = limit;
            
            // Handlers
            if (handlerModules.length > 0) {
                config.handlers = handlerModules.map((hm, idx) => ({
                    module: hm.module,
                    name: `Handler ${idx + 1}`,
                    params: hm.params
                }));
            }
            
            // Pre-tasks
            if (preTaskModules.length > 0) {
                config.pre_tasks = preTaskModules.map((tm, idx) => ({
                    module: tm.module,
                    name: `Pre-task ${idx + 1}`,
                    params: tm.params
                }));
            }
            
            // Post-tasks
            if (postTaskModules.length > 0) {
                config.post_tasks = postTaskModules.map((tm, idx) => ({
                    module: tm.module,
                    name: `Post-task ${idx + 1}`,
                    params: tm.params
                }));
            }
            
            return config;
        }

        function addHandler() {
            addTaskModuleToContainer('builder-handlers-list', handlerModules, 'Handler');
        }

        function addPreTask() {
            addTaskModuleToContainer('builder-pre-tasks-list', preTaskModules, 'Pre-task');
        }

        function addPostTask() {
            addTaskModuleToContainer('builder-post-tasks-list', postTaskModules, 'Post-task');
        }

        function addTaskModuleToContainer(containerId, modulesArray, taskType) {
            const container = document.getElementById(containerId);
            if (!container) return;
            
            const moduleSelect = document.createElement('select');
            moduleSelect.className = 'form-control';
            moduleSelect.style.marginBottom = '10px';
            
            // Добавляем опцию по умолчанию
            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = '-- ВЫБЕРИТЕ МОДУЛЬ --';
            defaultOption.selected = true;
            defaultOption.disabled = true;
            moduleSelect.appendChild(defaultOption);
            
            Object.keys(availableModules).forEach(key => {
                const option = document.createElement('option');
                option.value = key;
                option.textContent = availableModules[key].name;
                moduleSelect.appendChild(option);
            });
            
            const taskDiv = document.createElement('div');
            taskDiv.className = 'task-module-item';
            taskDiv.style.marginBottom = '15px';
            taskDiv.style.padding = '15px';
            taskDiv.style.border = '1px solid #e2e8f0';
            taskDiv.style.borderRadius = '5px';
            
            const taskId = modulesArray.length;
            modulesArray.push({ module: '', params: {} });
            
            taskDiv.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <strong>${taskType} ${taskId + 1}</strong>
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeTaskFromArray(this, '${containerId}', ${taskId})">Удалить</button>
                </div>
                <div style="margin-bottom: 10px;">
                    <label style="display: block; margin-bottom: 5px; font-weight: 500;">Модуль:</label>
                </div>
            `;
            
            // Добавляем селект модуля
            const moduleContainer = taskDiv.querySelector('div:last-child');
            moduleSelect.style.width = '100%';
            moduleSelect.style.padding = '8px';
            moduleSelect.style.border = '1px solid #cbd5e0';
            moduleSelect.style.borderRadius = '5px';
            moduleSelect.style.marginBottom = '10px';
            moduleContainer.appendChild(moduleSelect);
            
            // Добавляем контейнер для полей
            const fieldsContainer = document.createElement('div');
            fieldsContainer.className = 'task-fields';
            taskDiv.appendChild(fieldsContainer);
            
            moduleSelect.onchange = function() {
                if (this.value) {
                    modulesArray[taskId].module = this.value;
                    updateTaskFieldsForArray(taskDiv, taskId, modulesArray);
                } else {
                    modulesArray[taskId].module = '';
                    const fieldsContainer = taskDiv.querySelector('.task-fields');
                    if (fieldsContainer) fieldsContainer.innerHTML = '';
                }
            };
            
            container.appendChild(taskDiv);
        }

        function removeTaskFromArray(btn, containerId, index) {
            const taskDiv = btn.closest('.task-module-item');
            const container = document.getElementById(containerId);
            let arrayToModify;
            
            if (containerId === 'builder-handlers-list') {
                arrayToModify = handlerModules;
            } else if (containerId === 'builder-pre-tasks-list') {
                arrayToModify = preTaskModules;
            } else if (containerId === 'builder-post-tasks-list') {
                arrayToModify = postTaskModules;
            } else {
                return;
            }
            
            arrayToModify.splice(index, 1);
            taskDiv.remove();
            updateTasksListForContainer(containerId);
        }

        function updateTasksListForContainer(containerId) {
            const container = document.getElementById(containerId);
            if (!container) return;
            
            const items = container.querySelectorAll('.task-module-item');
            items.forEach((item, index) => {
                const strong = item.querySelector('strong');
                if (strong) {
                    let prefix = 'Задача';
                    if (containerId === 'builder-handlers-list') prefix = 'Handler';
                    else if (containerId === 'builder-pre-tasks-list') prefix = 'Pre-task';
                    else if (containerId === 'builder-post-tasks-list') prefix = 'Post-task';
                    strong.textContent = `${prefix} ${index + 1}`;
                }
            });
        }

        function updateTaskFieldsForArray(taskDiv, taskId, modulesArray) {
            const module = modulesArray[taskId].module;
            if (!module || !availableModules[module]) {
                const fieldsContainer = taskDiv.querySelector('.task-fields');
                if (fieldsContainer) fieldsContainer.innerHTML = '';
                return;
            }
            
            const fieldsContainer = taskDiv.querySelector('.task-fields');
            if (!fieldsContainer) return;
            
            fieldsContainer.innerHTML = '';
            
            const moduleInfo = availableModules[module];
            moduleInfo.fields.forEach(field => {
                const fieldDiv = document.createElement('div');
                fieldDiv.style.marginBottom = '15px';
                
                const label = document.createElement('label');
                label.textContent = field.label + (field.required ? ' *' : '');
                label.style.display = 'block';
                label.style.marginBottom = '5px';
                label.style.fontWeight = '500';
                label.style.color = '#4a5568';
                
                let input;
                if (field.type === 'select') {
                    input = document.createElement('select');
                    field.options.forEach(opt => {
                        const option = document.createElement('option');
                        option.value = opt;
                        option.textContent = opt;
                        if (opt === field.default) option.selected = true;
                        input.appendChild(option);
                    });
                } else if (field.type === 'checkbox') {
                    input = document.createElement('input');
                    input.type = 'checkbox';
                    input.checked = field.default || false;
                    input.style.marginRight = '5px';
                } else {
                    input = document.createElement('input');
                    input.type = field.type || 'text';
                    if (field.default) input.value = field.default;
                    input.placeholder = field.label;
                }
                
                input.className = 'form-control';
                input.style.width = '100%';
                input.style.padding = '8px';
                input.style.border = '1px solid #cbd5e0';
                input.style.borderRadius = '5px';
                input.style.fontSize = '14px';
                
                // Инициализируем значение по умолчанию
                if (field.type === 'checkbox') {
                    modulesArray[taskId].params[field.name] = field.default || false;
                } else if (field.default) {
                    modulesArray[taskId].params[field.name] = field.default;
                    if (input.value === '') {
                        input.value = field.default;
                    }
                }
                
                input.onchange = input.oninput = function() {
                    if (field.type === 'checkbox') {
                        modulesArray[taskId].params[field.name] = this.checked;
                    } else {
                        const value = this.value.trim();
                        if (value) {
                            modulesArray[taskId].params[field.name] = value;
                        } else if (!field.required) {
                            delete modulesArray[taskId].params[field.name];
                        }
                    }
                };
                
                // Для checkbox создаем обертку
                if (field.type === 'checkbox') {
                    const wrapper = document.createElement('label');
                    wrapper.style.display = 'flex';
                    wrapper.style.alignItems = 'center';
                    wrapper.style.cursor = 'pointer';
                    wrapper.appendChild(input);
                    wrapper.appendChild(document.createTextNode(' ' + field.label));
                    fieldDiv.appendChild(wrapper);
                } else {
                    fieldDiv.appendChild(label);
                    fieldDiv.appendChild(input);
                }
                
                fieldsContainer.appendChild(fieldDiv);
            });
        }

        document.getElementById('playbook-builder-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const config = getPlaybookBuilderConfig();
            try {
                await apiCall('POST', '/api/builders/playbook', config);
                closePlaybookBuilderModal();
                loadPlaybooks();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

        // Конструктор инвентори
        function openInventoryBuilderModal() {
            document.getElementById('inventory-builder-modal').classList.add('active');
            inventoryGroups = [];
            updateGroupsList();
        }

        function closeInventoryBuilderModal() {
            document.getElementById('inventory-builder-modal').classList.remove('active');
            document.getElementById('inventory-builder-form').reset();
            inventoryGroups = [];
            updateGroupsList();
        }

        function addGroup() {
            const groupId = inventoryGroups.length;
            inventoryGroups.push({ name: `group${groupId + 1}`, hosts: [], vars: {}, auth: {} });
            updateGroupsList();
        }

        function removeGroup(index) {
            inventoryGroups.splice(index, 1);
            updateGroupsList();
        }

        function updateGroupsList() {
            const container = document.getElementById('builder-groups-list');
            container.innerHTML = '';
            
            inventoryGroups.forEach((group, index) => {
                const groupDiv = document.createElement('div');
                groupDiv.style.marginBottom = '15px';
                groupDiv.style.padding = '15px';
                groupDiv.style.border = '1px solid #e2e8f0';
                groupDiv.style.borderRadius = '5px';
                
                groupDiv.innerHTML = `
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <input type="text" class="form-control" placeholder="Название группы" value="${group.name}" 
                               onchange="inventoryGroups[${index}].name = this.value" style="width: 200px;">
                        <button type="button" class="btn btn-danger btn-sm" onclick="removeGroup(${index})">Удалить группу</button>
                    </div>
                    <div>
                        <label>Хосты (по одному на строку, формат: hostname ansible_host=IP ansible_user=USER ansible_password=PASS):</label>
                        <textarea class="form-control" rows="4" placeholder="web1 ansible_host=192.168.1.10 ansible_user=admin ansible_password=secret&#10;web2 ansible_host=192.168.1.11 ansible_user=root ansible_password=pass123"
                                  onchange="updateGroupHosts(${index}, this.value)"></textarea>
                        <small style="color: #718096; font-size: 12px;">
                            Поддерживаемые параметры: ansible_host, ansible_user, ansible_password, ansible_port, ansible_ssh_private_key_file
                        </small>
                    </div>
                    <div style="margin-top: 10px;">
                        <label style="display: flex; align-items: center;">
                            <input type="checkbox" id="group-auth-check-${index}" onchange="toggleGroupPasswordAuth(${index}, this.checked)" style="margin-right: 5px;">
                            Использовать единый логин/пароль для всех хостов группы
                        </label>
                        <div id="group-auth-${index}" style="display: none; margin-top: 10px;">
                            <div class="form-row">
                                <div class="form-group">
                                    <label>Логин (ansible_user)</label>
                                    <input type="text" class="form-control" placeholder="admin" 
                                           onchange="setGroupAuth(${index}, 'ansible_user', this.value)">
                                </div>
                                <div class="form-group">
                                    <label>Пароль (ansible_password)</label>
                                    <input type="password" class="form-control" placeholder="password" 
                                           onchange="setGroupAuth(${index}, 'ansible_password', this.value)">
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                // Восстанавливаем состояние чекбокса если есть auth
                if (group.auth) {
                    const checkbox = groupDiv.querySelector(`#group-auth-check-${index}`);
                    if (checkbox) {
                        checkbox.checked = true;
                        toggleGroupPasswordAuth(index, true);
                        const userInput = groupDiv.querySelector(`#group-auth-${index} input[type="text"]`);
                        const passInput = groupDiv.querySelector(`#group-auth-${index} input[type="password"]`);
                        if (userInput && group.auth.ansible_user) userInput.value = group.auth.ansible_user;
                        if (passInput && group.auth.ansible_password) passInput.value = group.auth.ansible_password;
                    }
                }
                
                container.appendChild(groupDiv);
            });
        }

        function updateGroupHosts(index, text) {
            const hosts = [];
            text.split('\n').forEach(line => {
                line = line.trim();
                if (line) {
                    const parts = line.split(/\s+/);
                    const host = { name: parts[0] };
                    parts.slice(1).forEach(part => {
                        const [key, ...valueParts] = part.split('=');
                        const value = valueParts.join('='); // На случай если в значении есть =
                        if (key && value) {
                            host[key] = value;
                        }
                    });
                    // Применяем общие настройки группы если они есть
                    if (inventoryGroups[index].auth) {
                        if (inventoryGroups[index].auth.ansible_user && !host.ansible_user) {
                            host.ansible_user = inventoryGroups[index].auth.ansible_user;
                        }
                        if (inventoryGroups[index].auth.ansible_password && !host.ansible_password) {
                            host.ansible_password = inventoryGroups[index].auth.ansible_password;
                        }
                    }
                    hosts.push(host);
                }
            });
            inventoryGroups[index].hosts = hosts;
        }

        function toggleGroupPasswordAuth(index, enabled) {
            const authDiv = document.getElementById(`group-auth-${index}`);
            if (authDiv) {
                authDiv.style.display = enabled ? 'block' : 'none';
            }
        }

        function setGroupAuth(index, key, value) {
            if (!inventoryGroups[index].auth) {
                inventoryGroups[index].auth = {};
            }
            if (value) {
                inventoryGroups[index].auth[key] = value;
                // Применяем к существующим хостам
                inventoryGroups[index].hosts.forEach(host => {
                    host[key] = value;
                });
            } else {
                delete inventoryGroups[index].auth[key];
            }
        }

        async function previewInventory() {
            const config = getInventoryBuilderConfig();
            try {
                const result = await apiCall('POST', '/api/builders/inventory', config);
                alert('Инвентори создан! Содержимое:\n\n' + result.content);
                closeInventoryBuilderModal();
                loadInventories();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        }

        function getInventoryBuilderConfig() {
            // Применяем общие настройки аутентификации к хостам
            inventoryGroups.forEach((group, index) => {
                if (group.auth) {
                    group.hosts.forEach(host => {
                        if (group.auth.ansible_user && !host.ansible_user) {
                            host.ansible_user = group.auth.ansible_user;
                        }
                        if (group.auth.ansible_password && !host.ansible_password) {
                            host.ansible_password = group.auth.ansible_password;
                        }
                    });
                }
            });
            
            return {
                name: document.getElementById('builder-inventory-name').value,
                description: document.getElementById('builder-inventory-description').value,
                type: document.getElementById('builder-inventory-type').value,
                groups: inventoryGroups
            };
        }

        document.getElementById('inventory-builder-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const config = getInventoryBuilderConfig();
            try {
                await apiCall('POST', '/api/builders/inventory', config);
                closeInventoryBuilderModal();
                loadInventories();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

        // Инициализация - загружаем только если страница полностью загружена
        function initializeApp() {
            // Загружаем только если активна вкладка плейбуков
            const playbooksTab = document.getElementById('playbooks-tab');
            if (playbooksTab && playbooksTab.classList.contains('active')) {
                loadPlaybooks();
            }
            loadModules();
            updateStats();
        }
        
        // Проверяем готовность DOM
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initializeApp);
        } else {
            // DOM уже загружен
            initializeApp();
        }
        
        // Автообновление списка запусков
        setInterval(() => {
            const runsTab = document.getElementById('runs-tab');
            if (runsTab && runsTab.classList.contains('active')) {
                loadRuns();
            }
        }, 5000);
    </script>
{% endblock %}