{% extends "base.html" %}

{% block title %}Automation Workspace Manager{% endblock %}

{% block content %}
<style>
    .ansible-submenu {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    .ansible-submenu .btn {
        border-color: #cbd5e1;
    }
    .ansible-submenu .btn.active {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #fff;
    }
    .awm-host-table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        padding-bottom: 10px;
    }
    .awm-host-table {
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
        font-size: 12px;
        table-layout: fixed;
    }
    .awm-host-table th,
    .awm-host-table td {
        border: 1px solid var(--border);
        padding: 4px;
        text-align: left;
        vertical-align: middle;
    }
    .awm-host-table th {
        background: var(--bg-secondary);
        color: var(--gray-700);
        font-weight: 600;
        white-space: nowrap;
    }
    .awm-host-table th.col-host { width: 18%; }
    .awm-host-table th.col-ip { width: 18%; }
    .awm-host-table th.col-user { width: 12%; }
    .awm-host-table th.col-conn { width: 10%; }
    .awm-host-table th.col-sshargs { width: 16%; }
    .awm-host-table th.col-extra { width: 16%; }
    .awm-host-table th.col-actions { width: 10%; }
    .awm-host-input {
        width: 100%;
        min-width: 0;
        height: 30px;
        box-sizing: border-box;
    }
    .awm-host-actions {
        white-space: nowrap;
    }
    .awm-host-summary {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--gray-700);
    }
    .inventory-group-card {
        margin-bottom: 15px;
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .inventory-mode-switch {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-secondary);
    }
    .inventory-manual-wrap {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        padding: 10px;
    }
    .inventory-manual-title {
        margin: 0 0 6px;
        font-weight: 600;
        color: var(--gray-700);
    }
    .inventory-manual-textarea {
        width: 100%;
        min-height: 120px;
        border-radius: 8px;
        border: 1px solid var(--border);
        padding: 10px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        line-height: 1.35;
        resize: vertical;
        background: #fbfdff;
    }
    .inventory-manual-help {
        margin-top: 8px;
        color: var(--gray-600);
        font-size: 12px;
        line-height: 1.45;
    }
    .inventory-token-hint {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-left: 6px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        color: var(--gray-700);
        font-size: 12px;
        cursor: help;
        vertical-align: middle;
    }
    .inventory-token-note {
        display: inline-block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--gray-600);
    }
    .icon-title-row {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 10px;
        align-items: end;
    }
    .icon-title-row .icon-select-compact {
        min-width: 0;
        width: 100%;
        text-align: center;
        font-size: 16px;
        height: 42px;
        min-height: 42px;
        padding: 0 10px;
        line-height: 42px;
        box-sizing: border-box;
    }
    @media (max-width: 760px) {
        .icon-title-row {
            grid-template-columns: 1fr;
        }

        .ansible-submenu .btn {
            flex: 1 1 calc(50% - 8px);
            justify-content: center;
        }

        .awm-host-table {
            min-width: 640px;
        }

        .awm-host-summary {
            white-space: normal;
        }

        .toolbar > div[style*="display: flex"] {
            width: 100%;
        }
    }

    @media (max-width: 520px) {
        .ansible-submenu .btn {
            flex: 1 1 100%;
        }

        .awm-host-table {
            min-width: 560px;
        }
    }
</style>

        <div class="card" style="margin-bottom: 12px;">
            <div class="ansible-submenu" id="ansible-submenu" style="margin-bottom: 0;">
                <button class="btn btn-secondary btn-sm active" type="button" data-ansible-subtab="playbooks" onclick="switchTab('playbooks')">Плейбуки</button>
                <button class="btn btn-secondary btn-sm" type="button" data-ansible-subtab="inventories" onclick="switchTab('inventories')">Инвентори</button>
                <button class="btn btn-secondary btn-sm" type="button" data-ansible-subtab="runs" onclick="switchTab('runs')">Запуски</button>
                <button class="btn btn-secondary btn-sm" type="button" data-ansible-subtab="templates" onclick="switchTab('templates')">Шаблоны</button>
            </div>
        </div>

        <!-- Плейбуки -->
        <div id="playbooks-tab" class="tab-content active">
            <div class="card">
                <div class="toolbar">
                    <h2>Ansible</h2>
                    <div style="display: flex; gap: 10px;">
                        <button class="btn btn-secondary" onclick="exportPlaybooksArchive()" title="Скачать ZIP со всеми доступными вам плейбуками в формате AWM: резервная копия или перенос в другую установку AWM">
                            <span>📦</span> Выгрузить архив AWM
                        </button>
                        <button class="btn btn-secondary" onclick="openPlaybooksImport()" title="Загрузить ZIP, ранее выгруженный кнопкой «Выгрузить архив AWM». Архивы обычного Ansible не принимаются — для них «Перенос из Ansible»">
                            <span class="ui-icon">📥</span> Загрузить архив AWM
                        </button>
                        <button class="btn btn-secondary" onclick="openProjectImportModal()" title="Перенести существующий Ansible-проект из архива ZIP или TAR.GZ: плейбуки, инвентори, роли, group_vars. Перед переносом показывается предпросмотр">
                            <span>🗂️</span> Перенос из Ansible
                        </button>
                        <button class="btn btn-primary" onclick="openPlaybookBuilderModal()" title="Пошаговое создание плейбука из готовых блоков, без ручного YAML">
                            <span>🔧</span> Конструктор
                        </button>
                        <button class="btn btn-primary" onclick="openPlaybookModal()" title="Новый плейбук: имя, описание и текст YAML">
                            <span class="ui-icon">✏</span> Создать вручную
                        </button>
                    </div>
                </div>
                <div class="toolbar" style="margin-top:0; padding-top:0;">
                    <input type="search" id="playbooks-search" class="form-control" placeholder="Поиск плейбуков..." style="max-width:320px;">
                </div>
                <div id="playbooks-list" class="awm-list-scroll">
                    <div class="loading">Загрузка...</div>
                </div>
                <div id="playbooks-list-pager" class="awm-pagination-host"></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-secondary" onclick="exportInventoriesArchive()" title="Скачать ZIP со всеми доступными вам инвентори в формате AWM: резервная копия или перенос в другую установку AWM">
                            <span>📦</span> Выгрузить архив AWM
                        </button>
                        <button class="btn btn-secondary" onclick="openInventoriesImport()" title="Загрузить ZIP, ранее выгруженный кнопкой «Выгрузить архив AWM». Архивы обычного Ansible не принимаются — для них «Перенос из Ansible»">
                            <span class="ui-icon">📥</span> Загрузить архив AWM
                        </button>
                        <button class="btn btn-secondary" onclick="openProjectImportModal('inventory')" title="Перенести существующий Ansible-проект из архива ZIP или TAR.GZ: инвентори вместе с group_vars и host_vars, плейбуки, роли. Перед переносом показывается предпросмотр">
                            <span>🗂️</span> Перенос из Ansible
                        </button>
                        <button class="btn btn-primary" onclick="openInventoryBuilderModal()" title="Пошаговое создание инвентори: группы, хосты и переменные в форме">
                            <span>🔧</span> Конструктор
                        </button>
                        <button class="btn btn-primary" onclick="openInventoryModal()" title="Новый инвентори: имя и текст в формате INI или YAML">
                            <span class="ui-icon">✏</span> Создать вручную
                        </button>
                    </div>
                </div>
                <div class="toolbar" style="margin-top:0; padding-top:0;">
                    <input type="search" id="inventories-search" class="form-control" placeholder="Поиск инвентори..." style="max-width:320px;">
                </div>
                <div id="inventories-list" class="awm-list-scroll">
                    <div class="loading">Загрузка...</div>
                </div>
                <div id="inventories-list-pager" class="awm-pagination-host"></div>
            </div>
        </div>

        <!-- Запуски -->
        <div id="runs-tab" class="tab-content">
            <div class="card">
                <div class="toolbar">
                    <h2>Запуски</h2>
                    <button class="btn btn-success" data-requires-ansible="true" onclick="openRunModal()">
                        <span class="ui-icon">▶</span> Запустить плейбук
                    </button>
                    <button class="btn btn-secondary" data-requires-ansible="true" onclick="openPlaybookScheduleModal()">
                        <span>⏰</span> Отложенный запуск
                    </button>
                </div>
                <div class="toolbar" style="margin-top:0; padding-top:0;">
                    <input type="search" id="runs-search" class="form-control" placeholder="Поиск запусков..." style="max-width:320px;">
                </div>
                <div id="runs-list" class="awm-list-scroll">
                    <div class="loading">Загрузка...</div>
                </div>
                <div id="runs-list-pager" class="awm-pagination-host"></div>
                <div style="margin-top:14px;">
                    <h4 style="margin:8px 0;">Запланированные задачи плейбуков</h4>
                    <div id="playbook-schedules-list"><div class="loading">Загрузка...</div></div>
                </div>
            </div>
        </div>

        <!-- Шаблоны -->
        <div id="templates-tab" class="tab-content">
            <div class="card">
                <div class="toolbar">
                    <h2>Шаблоны плейбуков</h2>
                    <div style="display:flex; gap:8px; flex-wrap:wrap;">
                        <button class="btn btn-info" type="button" onclick="openInlineLibraryModal()">Библиотека готовых</button>
                        <button class="btn btn-success" type="button" onclick="openTemplateCreatePrompt()">+ Создать шаблон</button>
                    </div>
                </div>
                <div id="templates-inline-list"><div class="loading">Загрузка...</div></div>
            </div>
        </div>
    </div>

    <div id="inline-library-modal" class="modal">
        <div class="modal-content" style="max-width: 980px;">
            <div class="modal-header">
                <h3>Библиотека готовых шаблонов</h3>
                <button class="close-btn" type="button" onclick="closeInlineLibraryModal()">&times;</button>
            </div>
            <div id="inline-library-list"></div>
            <div style="display:flex; justify-content:flex-end; margin-top:12px;">
                <button type="button" class="btn btn-secondary" onclick="closeInlineLibraryModal()">Закрыть</button>
            </div>
        </div>
    </div>

    <div id="playbook-schedule-modal" class="modal">
        <div class="modal-content" style="max-width: 760px;">
            <div class="modal-header">
                <h3>Планировщик запуска плейбука</h3>
                <button class="close-btn" onclick="closePlaybookScheduleModal()">&times;</button>
            </div>
            <form id="playbook-schedule-form">
                <div class="form-group">
                    <label>Название задачи</label>
                    <input type="text" id="schedule-name" required placeholder="Наименование расписания">
                </div>
                <div class="form-group">
                    <label>Плейбук</label>
                    <select id="schedule-playbook" required></select>
                </div>
                <div class="form-group">
                    <label>Инвентори (опционально)</label>
                    <select id="schedule-inventory"><option value="">Без инвентори</option></select>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Часовой пояс</label>
                        <select id="schedule-timezone" required></select>
                    </div>
                    <div class="form-group">
                        <label>Режим запуска</label>
                        <select id="schedule-mode">
                            <option value="once">Разово</option>
                            <option value="interval">Периодически</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Дата</label>
                        <input type="date" id="schedule-date" required>
                    </div>
                    <div class="form-group">
                        <label>Время</label>
                        <input type="time" id="schedule-time" required>
                    </div>
                </div>
                <div id="schedule-interval-box" class="form-row" style="display:none;">
                    <div class="form-group">
                        <label>Период</label>
                        <input type="number" id="schedule-interval-value" min="1" value="1">
                    </div>
                    <div class="form-group">
                        <label>Единица</label>
                        <select id="schedule-interval-unit">
                            <option value="minutes">минуты</option>
                            <option value="hours">часы</option>
                            <option value="days">дни</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label><input type="checkbox" id="schedule-check-mode"> Режим проверки (check)</label></div>
                    <div class="form-group"><label><input type="checkbox" id="schedule-diff-mode"> Режим diff</label></div>
                </div>
                <div class="form-group">
                    <label>Ограничение хостов (limit)</label>
                    <input type="text" id="schedule-limit" placeholder="host1,host2">
                </div>
                <div style="display:flex; gap:10px; justify-content:flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="closePlaybookScheduleModal()">Отмена</button>
                    <button type="submit" class="btn btn-primary">Сохранить расписание</button>
                </div>
            </form>
        </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="icon-title-row">
                    <div class="form-group">
                        <label>Значок</label>
                        <select id="playbook-icon" class="icon-select-compact"></select>
                    </div>
                    <div class="form-group">
                        <label>Название</label>
                        <input type="text" id="playbook-name" required>
                    </div>
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <input type="text" id="playbook-description">
                </div>
                <div class="form-group">
                    <label>Заметки/напоминания</label>
                    <textarea id="playbook-notes" rows="3" placeholder="Примечания к запуску"></textarea>
                </div>
                <div class="form-group">
                    <label>Доступ</label>
                    <select id="playbook-group-id">
                        <option value="">Личный (только владелец)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Содержимое (YAML) <span class="inventory-token-hint" title="Поддерживается подстановка переменных проекта в формате {% raw %}{{var:NAME}}{% endraw %}.">?</span></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="icon-title-row">
                    <div class="form-group">
                        <label>Значок</label>
                        <select id="inventory-icon" class="icon-select-compact"></select>
                    </div>
                    <div class="form-group">
                        <label>Название</label>
                        <input type="text" id="inventory-name" required>
                    </div>
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <input type="text" id="inventory-description">
                </div>
                <div class="form-group">
                    <label>Заметки/напоминания</label>
                    <textarea id="inventory-notes" rows="3" placeholder="Назначение инвентори"></textarea>
                </div>
                <div class="form-group">
                    <label>Доступ</label>
                    <select id="inventory-group-id">
                        <option value="">Личный (только владелец)</option>
                    </select>
                </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>Содержимое <span class="inventory-token-hint" title="Поддерживаются токены: {% raw %}{{secret:NAME}}{% endraw %}, {% raw %}{{sshkey:NAME}}{% endraw %}, {% raw %}{{var:NAME}}{% endraw %}.">?</span></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"> Режим проверки (без изменений)
                        </label>
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="run-diff-mode"> Режим diff
                        </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" data-requires-ansible="true">Запустить</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" style="background:#0b1220;color:#e6edf7;border:1px solid #24334d;line-height:1.5;font-weight:500;">Загрузка...</div>
        </div>
    </div>

    <!-- Модальное окно конструктора плейбуков -->
    <div id="playbook-builder-modal" class="modal">
        <div class="modal-content" style="max-width: 1000px;">
            <div class="modal-header">
                <h3 id="playbook-builder-title">Конструктор плейбука</h3>
                <button class="close-btn" onclick="closePlaybookBuilderModal()">&times;</button>
            </div>
            <form id="playbook-builder-form">
                <div id="builder-playbook-yaml-edit-group" class="form-group" style="display:none;">
                    <label>Редактирование YAML напрямую (опционально) <span class="inventory-token-hint" title="Поддерживается подстановка переменных проекта в формате {% raw %}{{var:NAME}}{% endraw %}.">?</span></label>
                    <textarea id="builder-playbook-yaml-direct" rows="12" placeholder="Вставьте YAML плейбука. Если поле заполнено, при сохранении используется именно этот YAML."></textarea>
                </div>
                <div class="form-group">
                    <label>Шаблон плейбука</label>
                    <select id="builder-playbook-template" onchange="loadPlaybookTemplate()">
                        <option value="">Создать с нуля</option>
                    </select>
                </div>
                <div class="icon-title-row">
                    <div class="form-group">
                        <label>Значок</label>
                        <select id="builder-playbook-icon" class="icon-select-compact"></select>
                    </div>
                    <div class="form-group">
                        <label>Название плейбука</label>
                        <input type="text" id="builder-playbook-name" required>
                    </div>
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <input type="text" id="builder-playbook-description">
                </div>
                <div class="form-group">
                    <label>Доступ</label>
                    <select id="builder-playbook-group-id">
                        <option value="">Личный (только владелец)</option>
                    </select>
                </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>
                        <small style="display: block; color: #718096; font-size: 12px; margin-top: 5px;">
                            Если включено, Ansible выполнит `setup` и соберёт переменные хоста (OS, сеть, память и т.д.) перед задачами.
                        </small>
                    </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>
                    <small style="display: block; color: #718096; font-size: 12px; margin-top: 5px;">
                        `linear` — шаг за шагом по всем хостам, `free` — хосты идут независимо, `host_pinned` — задачи "привязаны" к каждому хосту.
                    </small>
                </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>
                    <small style="color: #718096;">
                        Справка: допускается использование значения из секретов/ключей внутри переменных, например
                        <code>ansible_password: {% raw %}{{secret:my_secret}}{% endraw %}</code>.
                    </small>
                </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>
                    <small style="color: #718096; display:block; margin-bottom:8px;">
                        Для сложных сценариев комбинируйте задачи, pre/post-tasks и handlers. Если нужно полное ручное управление, используйте поле прямого YAML сверху.
                    </small>
                    <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>
                    <small style="display: block; color: #718096; font-size: 12px; margin-bottom: 8px;">
                        Выполняются только при `notify` из задач и обычно используются для перезапуска сервисов после изменений.
                    </small>
                    <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>
                    <small style="display: block; color: #718096; font-size: 12px; margin-bottom: 8px;">
                        Подготовительные шаги, которые выполняются до основного блока `tasks` (проверки, установка зависимостей и т.п.).
                    </small>
                    <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>
                    <small style="display: block; color: #718096; font-size: 12px; margin-bottom: 8px;">
                        Финальные шаги после основного выполнения: проверки результата, cleanup, финальная конфигурация.
                    </small>
                    <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="button" class="btn btn-info" onclick="saveBuilderAsTemplate()">Сохранить как шаблон</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 id="inventory-builder-title">Конструктор инвентори</h3>
                <button class="close-btn" onclick="closeInventoryBuilderModal()">&times;</button>
            </div>
            <form id="inventory-builder-form">
                <div id="builder-inventory-yaml-edit-group" class="form-group" style="display:none;">
                    <label>Редактирование инвентори напрямую (опционально) <span class="inventory-token-hint" title="Поддерживаются токены: {% raw %}{{secret:NAME}}{% endraw %}, {% raw %}{{sshkey:NAME}}{% endraw %}, {% raw %}{{var:NAME}}{% endraw %}.">?</span></label>
                    <textarea id="builder-inventory-yaml-direct" rows="12" placeholder="Вставьте INI/YAML инвентори. Если поле заполнено, при сохранении используется именно этот контент."></textarea>
                </div>
                <div class="icon-title-row">
                    <div class="form-group">
                        <label>Значок</label>
                        <select id="builder-inventory-icon" class="icon-select-compact"></select>
                    </div>
                    <div class="form-group">
                        <label>Название инвентори</label>
                        <input type="text" id="builder-inventory-name" required>
                    </div>
                </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-group-id">
                        <option value="">Личный (только владелец)</option>
                    </select>
                </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 class="form-group">
                    <label>Python interpreter для всех хостов (необязательно)</label>
                    <input type="text" id="builder-inventory-python-interpreter" placeholder="/usr/bin/python3">
                    <small style="color: #718096;">Добавляет [all:vars] ansible_python_interpreter=...</small>
                </div>
                <div id="builder-groups-container">
                    <h4 style="margin: 20px 0 10px 0;">Группы хостов</h4>
                    <small style="color: #718096; display:block; margin-bottom:8px;">
                        Добавляйте хосты интерактивно или вручную. Ручной режим поддерживает кавычки в значениях, например
                        <code>ansible_ssh_common_args='-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null'</code>.
                    </small>
                    <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>

    <div id="group-host-modal" class="modal">
        <div class="modal-content" style="max-width: 760px;">
            <div class="modal-header">
                <h3 id="group-host-modal-title">Хост группы</h3>
                <button class="close-btn" onclick="closeGroupHostModal()">&times;</button>
            </div>
            <form id="group-host-form">
                <div class="form-row">
                    <div class="form-group">
                        <label>Хост *</label>
                        <input type="text" id="group-host-name" required placeholder="web1 или 10.200.0.97">
                    </div>
                    <div class="form-group">
                        <label>IP / DNS</label>
                        <input type="text" id="group-host-ansible-host" placeholder="10.200.0.97">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Пользователь</label>
                        <input type="text" id="group-host-ansible-user" placeholder="root">
                    </div>
                    <div class="form-group">
                        <label>Подключение</label>
                        <input type="text" id="group-host-ansible-connection" placeholder="ssh/paramiko" list="group-host-connection-hints">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Пароль <span class="inventory-token-hint" title="Можно вставлять ссылку на секрет: {% raw %}{{secret:NAME}}{% endraw %}. Начните ввод и выберите вариант из подсказки.">?</span></label>
                        <input type="text" id="group-host-ansible-password" placeholder="{% raw %}{{secret:name}}{% endraw %}" list="group-host-secret-hints" oninput="maybeAutofillInventoryUsernameFromSecrets(this)">
                    </div>
                    <div class="form-group">
                        <label>Пароль sudo <span class="inventory-token-hint" title="Можно вставлять ссылку на секрет: {% raw %}{{secret:NAME}}{% endraw %}. Начните ввод и выберите вариант из подсказки.">?</span></label>
                        <input type="text" id="group-host-ansible-become-pass" placeholder="{% raw %}{{secret:name}}{% endraw %}" list="group-host-secret-hints" oninput="maybeAutofillInventoryUsernameFromSecrets(this)">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Порт</label>
                        <input type="text" id="group-host-ansible-port" placeholder="22">
                    </div>
                    <div class="form-group">
                        <label>SSH-ключ <span class="inventory-token-hint" title="Можно вставлять ссылку на SSH-ключ: {% raw %}{{sshkey:NAME}}{% endraw %}. Начните ввод и выберите вариант из подсказки.">?</span></label>
                        <input type="text" id="group-host-ansible-ssh-key" placeholder="{% raw %}{{sshkey:name}}{% endraw %}" list="group-host-sshkey-hints">
                    </div>
                </div>
                <div class="form-group">
                    <label>Аргументы SSH</label>
                    <input type="text" id="group-host-ansible-ssh-common-args" placeholder="-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null">
                </div>
                <div class="form-group">
                    <label>Доп. переменные (key=value через пробел) <span class="inventory-token-hint" title="Поддерживаются ссылки: {% raw %}{{var:NAME}}{% endraw %}, {% raw %}{{secret:NAME}}{% endraw %}, {% raw %}{{sshkey:NAME}}{% endraw %}.">?</span></label>
                    <input type="text" id="group-host-extra-vars" placeholder="env=prod role=web app_port=8080">
                    <small class="inventory-token-note">Пример: <code>token={% raw %}{{secret:api_token}}{% endraw %}</code> <code>env={% raw %}{{var:environment}}{% endraw %}</code></small>
                </div>
                <datalist id="group-host-secret-hints"></datalist>
                <datalist id="group-host-sshkey-hints"></datalist>
                <datalist id="group-host-connection-hints">
                    <option value="ssh"></option>
                    <option value="paramiko"></option>
                    <option value="local"></option>
                    <option value="docker"></option>
                </datalist>
                <div style="display:flex; gap:10px; justify-content:flex-end; margin-top:20px;">
                    <button type="button" class="btn btn-secondary" onclick="closeGroupHostModal()">Отмена</button>
                    <button type="submit" class="btn btn-success">Сохранить</button>
                </div>
            </form>
        </div>
    </div>

    <div id="project-import-modal" class="modal">
        <div class="modal-content" style="max-width: 1100px;">
            <div class="modal-header">
                <h3>Перенос из Ansible</h3>
                <button class="close-btn" type="button" onclick="closeProjectImportModal()">&times;</button>
            </div>

            <div id="project-import-step-upload">
                <p class="form-hint">Архив ZIP или TAR.GZ с каталогом проекта: плейбуки, инвентори, roles, group_vars, host_vars, templates, files, ansible.cfg. Изменения в AWM вносятся только после подтверждения.</p>
                <div class="form-group">
                    <label>Архив проекта <span style="color: var(--danger);">*</span></label>
                    <input type="file" id="project-import-file" class="form-control" accept=".zip,.tar.gz,.tgz,application/zip,application/gzip">
                </div>
                <div class="form-group">
                    <label>Префикс имён (необязательно)</label>
                    <input type="text" id="project-import-prefix" class="form-control" maxlength="40" placeholder="например, legacy">
                    <small class="form-hint">Добавляется к именам плейбуков и инвентори: legacy__site</small>
                </div>
                <div style="display:flex; gap:10px; justify-content:flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="closeProjectImportModal()">Отмена</button>
                    <button type="button" class="btn btn-primary" id="project-import-analyze-btn" onclick="analyzeProjectImport()">Проанализировать</button>
                </div>
            </div>

            <div id="project-import-step-preview" style="display:none;">
                <div id="project-import-summary" class="form-hint" style="margin-bottom:10px;"></div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Показать</label>
                        <select id="project-import-filter" class="form-control" onchange="renderProjectImportItems()">
                            <option value="">Все</option>
                            <option value="playbook">Плейбуки</option>
                            <option value="inventory">Инвентори</option>
                            <option value="ansible_file">Ansible-файлы</option>
                            <option value="skipped">Не импортируются</option>
                            <option value="warnings">С предупреждениями</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>При совпадении имени</label>
                        <select id="project-import-conflict" class="form-control">
                            <option value="skip">Пропустить</option>
                            <option value="rename">Импортировать под новым именем</option>
                            <option value="overwrite">Перезаписать (с сохранением ревизии)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Доступ</label>
                        <select id="project-import-group" class="form-control">
                            <option value="">Личный (только владелец)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Метки плейбуков</label>
                        <input type="text" id="project-import-tags" class="form-control" maxlength="200" placeholder="import">
                    </div>
                </div>
                <div class="awm-list-scroll" style="max-height: 50vh;">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="project-import-check-all" onchange="toggleProjectImportAll(this.checked)" title="Выбрать все видимые"></th>
                                <th>Тип</th>
                                <th>Файл в архиве</th>
                                <th>Имя / путь в AWM</th>
                                <th>Замечания</th>
                            </tr>
                        </thead>
                        <tbody id="project-import-items"></tbody>
                    </table>
                </div>
                <div style="display:flex; gap:10px; justify-content:flex-end; margin-top:14px;">
                    <button type="button" class="btn btn-secondary" onclick="resetProjectImport()">Другой архив</button>
                    <button type="button" class="btn btn-primary" id="project-import-apply-btn" onclick="applyProjectImport()">Импортировать выбранное</button>
                </div>
            </div>

            <div id="project-import-step-result" style="display:none;">
                <div id="project-import-progress" class="form-hint" style="margin-bottom:10px;"></div>
                <div class="awm-list-scroll" style="max-height: 50vh;">
                    <table class="data-table">
                        <thead>
                            <tr><th>Результат</th><th>Тип</th><th>Файл в архиве</th><th>Имя / путь в AWM</th><th>Сообщение</th></tr>
                        </thead>
                        <tbody id="project-import-results"></tbody>
                    </table>
                </div>
                <div style="display:flex; gap:10px; justify-content:flex-end; margin-top:14px;">
                    <button type="button" class="btn btn-secondary" id="project-import-report-btn" onclick="downloadProjectImportReport()" disabled>Скачать отчёт</button>
                    <button type="button" class="btn btn-primary" onclick="closeProjectImportModal()">Готово</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const playbooksImportInput = (() => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.zip,application/zip';
            input.style.display = 'none';
            document.body.appendChild(input);
            return input;
        })();
        const inventoriesImportInput = (() => {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.zip,application/zip';
            input.style.display = 'none';
            document.body.appendChild(input);
            return input;
        })();

        let currentPlaybookName = null;
        let currentInventoryName = null;
        /** Счётчик отмены устаревших ответов GET при открытии модалки инвентори */
        let inventoryModalLoadToken = 0;
        let cachedUserGroups = [];
        const STANDARD_RESOURCE_ICONS = ["📘", "📋", "🧩", "⚙️", "🛠️", "🚀", "🔐", "📦", "🌐", "🧪", "🗂️"];
        let currentBuilderPlaybookName = null;
        let currentBuilderInventoryName = null;
        /** Счётчик отмены устаревших ответов GET в конструкторе инвентори */
        let inventoryBuilderLoadToken = 0;
        let currentRunId = null;
        let logWebSocket = null;
        let runLogLines = [];
        let runLogCurrentLine = '';
        let currentGroupHostEditState = null;
        const ANSI_ESCAPE_RE = /\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g;

        function resetRunLogBuffer() {
            runLogLines = [];
            runLogCurrentLine = '';
        }

        function normalizeLogChunk(chunk) {
            const text = String(chunk || "");
            // Strip ANSI color/control sequences and normalize CRLF first.
            return text.replace(ANSI_ESCAPE_RE, "").replace(/\r\n/g, "\n");
        }

        function appendRunLogChunk(chunk) {
            const text = normalizeLogChunk(chunk);
            for (const ch of text) {
                if (ch === "\r") {
                    // APT/DPKG progress updates rewrite current terminal line.
                    runLogCurrentLine = "";
                    continue;
                }
                if (ch === "\n") {
                    runLogLines.push(runLogCurrentLine);
                    runLogCurrentLine = "";
                    continue;
                }
                runLogCurrentLine += ch;
            }
        }

        function renderedRunLogText() {
            const out = runLogLines.slice();
            if (runLogCurrentLine) out.push(runLogCurrentLine);
            return out.join("\n");
        }

        function setRunLogTextFromSnapshot(rawText) {
            resetRunLogBuffer();
            appendRunLogChunk(rawText || "");
        }

        // Переключение вкладок
        function switchTab(tabName, eventElement = null) {
            const submenuButtons = document.querySelectorAll('#ansible-submenu [data-ansible-subtab]');
            submenuButtons.forEach((btn) => {
                btn.classList.toggle('active', btn.getAttribute('data-ansible-subtab') === tabName);
            });

            // Обновляем вкладки в главном меню
            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');
                }
            });
            if (tabName === 'inventories' || tabName === 'runs' || tabName === 'templates') {
                const playbooksMenuTab = document.querySelector('#main-tabs .tab[data-tab="playbooks"]');
                if (playbooksMenuTab) playbooksMenuTab.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();
            if (tabName === 'templates') loadInlineTemplates();
        }

        // Обновление статистики в 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);
                    if (window.AWM_ERRORS && typeof window.AWM_ERRORS.createApiError === 'function') {
                        throw window.AWM_ERRORS.createApiError(errorData, response.status);
                    }
                    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;
            }
        }

        async function loadUserGroupsForAccess() {
            try {
                cachedUserGroups = await apiCall('GET', '/api/groups');
            } catch (error) {
                cachedUserGroups = [];
            }
            const playbookSelect = document.getElementById('playbook-group-id');
            const inventorySelect = document.getElementById('inventory-group-id');
            const builderPlaybookSelect = document.getElementById('builder-playbook-group-id');
            const builderInventorySelect = document.getElementById('builder-inventory-group-id');
            if (!playbookSelect || !inventorySelect || !builderPlaybookSelect || !builderInventorySelect) return;
            const options = ['<option value="">Личный (только владелец)</option>']
                .concat(cachedUserGroups.map((g) => `<option value="${g.id}">${g.name}</option>`))
                .join('');
            playbookSelect.innerHTML = options;
            inventorySelect.innerHTML = options;
            builderPlaybookSelect.innerHTML = options;
            builderInventorySelect.innerHTML = options;
        }

        function renderResourceIconsOptions(selectId, selectedIcon = '') {
            const select = document.getElementById(selectId);
            if (!select) return;
            const options = ['<option value="">Без значка</option>']
                .concat(STANDARD_RESOURCE_ICONS.map((icon) => `<option value="${icon}" ${selectedIcon === icon ? 'selected' : ''}>${icon}</option>`))
                .join('');
            select.innerHTML = options;
        }

        async function downloadArchive(url, fileName) {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const blob = await response.blob();
            const downloadUrl = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = downloadUrl;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(downloadUrl);
        }

        async function uploadArchive(url, file) {
            const buffer = await file.arrayBuffer();
            const response = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/zip' },
                body: buffer
            });
            if (!response.ok) {
                const err = await response.json().catch(() => ({ detail: `HTTP ${response.status}` }));
                throw new Error(err.detail || `HTTP ${response.status}`);
            }
            return response.json();
        }

        async function exportPlaybooksArchive() {
            try {
                await downloadArchive('/api/playbooks/export/archive', `playbooks-export-${new Date().toISOString().slice(0, 10)}.zip`);
            } catch (error) {
                alert('Ошибка выгрузки архива плейбуков: ' + error.message);
            }
        }

        function openPlaybooksImport() {
            playbooksImportInput.value = '';
            playbooksImportInput.click();
        }

        playbooksImportInput.addEventListener('change', async (e) => {
            const file = e.target.files && e.target.files[0];
            if (!file) return;
            try {
                const result = await uploadArchive('/api/playbooks/import/archive', file);
                alert(`Загрузка архива плейбуков завершена. Создано: ${result.created}, обновлено: ${result.updated}${formatSkippedImport(result.skipped)}`);
                loadPlaybooks();
            } catch (error) {
                alert('Ошибка загрузки архива плейбуков: ' + error.message);
            }
        });

        async function exportInventoriesArchive() {
            try {
                await downloadArchive('/api/inventories/export/archive', `inventories-export-${new Date().toISOString().slice(0, 10)}.zip`);
            } catch (error) {
                alert('Ошибка выгрузки архива инвентори: ' + error.message);
            }
        }

        function openInventoriesImport() {
            inventoriesImportInput.value = '';
            inventoriesImportInput.click();
        }

        inventoriesImportInput.addEventListener('change', async (e) => {
            const file = e.target.files && e.target.files[0];
            if (!file) return;
            try {
                const result = await uploadArchive('/api/inventories/import/archive', file);
                alert(`Загрузка архива инвентори завершена. Создано: ${result.created}, обновлено: ${result.updated}${formatSkippedImport(result.skipped)}`);
                loadInventories();
            } catch (error) {
                alert('Ошибка загрузки архива инвентори: ' + error.message);
            }
        });

        function formatSkippedImport(skipped) {
            if (!Array.isArray(skipped) || !skipped.length) return '';
            const lines = skipped.slice(0, 10).map((s) => `• ${s.name || '—'}: ${s.reason}`);
            const more = skipped.length > 10 ? `\n… и ещё ${skipped.length - 10}` : '';
            return `, пропущено: ${skipped.length}\n${lines.join('\n')}${more}`;
        }

        // Импорт Ansible-проекта
        const PROJECT_IMPORT_KIND_TITLES = {
            playbook: 'Плейбук',
            inventory: 'Инвентори',
            ansible_file: 'Ansible-файл',
            skipped: 'Не импортируется',
        };
        const PROJECT_IMPORT_STATUS = {
            created: { title: 'Создан', cls: 'status-success' },
            updated: { title: 'Обновлён', cls: 'status-running' },
            skipped: { title: 'Пропущен', cls: 'status-pending' },
            error: { title: 'Ошибка', cls: 'status-failed' },
        };
        const projectImportState = { jobId: null, items: [], pollTimer: null, initialFilter: '' };

        function showProjectImportStep(step) {
            ['upload', 'preview', 'result'].forEach((name) => {
                document.getElementById(`project-import-step-${name}`).style.display = name === step ? '' : 'none';
            });
        }

        function openProjectImportModal(initialFilter = '') {
            resetProjectImport();
            projectImportState.initialFilter = initialFilter;
            const groupSelect = document.getElementById('project-import-group');
            groupSelect.innerHTML = ['<option value="">Личный (только владелец)</option>']
                .concat(cachedUserGroups.map((g) => `<option value="${g.id}">${escapeHtml(g.name)}</option>`))
                .join('');
            document.getElementById('project-import-modal').classList.add('active');
        }

        function closeProjectImportModal() {
            if (projectImportState.pollTimer) {
                clearTimeout(projectImportState.pollTimer);
                projectImportState.pollTimer = null;
            }
            document.getElementById('project-import-modal').classList.remove('active');
            loadPlaybooks();
            loadInventories();
        }

        function resetProjectImport() {
            if (projectImportState.jobId && !projectImportState.pollTimer) {
                fetch(`/api/ansible-import/${projectImportState.jobId}`, { method: 'DELETE' }).catch(() => {});
            }
            projectImportState.jobId = null;
            projectImportState.items = [];
            document.getElementById('project-import-file').value = '';
            document.getElementById('project-import-analyze-btn').disabled = false;
            showProjectImportStep('upload');
        }

        async function analyzeProjectImport() {
            const file = document.getElementById('project-import-file').files[0];
            if (!file) {
                alert('Выберите архив проекта');
                return;
            }
            const btn = document.getElementById('project-import-analyze-btn');
            btn.disabled = true;
            btn.textContent = 'Анализ…';
            try {
                const prefix = encodeURIComponent(document.getElementById('project-import-prefix').value.trim());
                const response = await fetch(`/api/ansible-import/analyze?name_prefix=${prefix}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/octet-stream' },
                    body: file,
                });
                const data = await response.json().catch(() => ({ detail: `HTTP ${response.status}` }));
                if (!response.ok) throw new Error(data.detail || `HTTP ${response.status}`);
                projectImportState.jobId = data.job_id;
                projectImportState.items = data.items || [];
                const s = data.summary || {};
                document.getElementById('project-import-summary').textContent =
                    `Найдено: плейбуков ${s.playbook || 0}, инвентори ${s.inventory || 0}, Ansible-файлов ${s.ansible_file || 0}; ` +
                    `не импортируется ${s.skipped || 0}; с предупреждениями ${s.warnings || 0}.`;
                document.getElementById('project-import-filter').value = projectImportState.initialFilter || '';
                renderProjectImportItems();
                showProjectImportStep('preview');
            } catch (error) {
                alert('Ошибка анализа архива: ' + error.message);
            } finally {
                btn.disabled = false;
                btn.textContent = 'Проанализировать';
            }
        }

        function projectImportVisibleItems() {
            const filter = document.getElementById('project-import-filter').value;
            return projectImportState.items.filter((item) => {
                if (!filter) return true;
                if (filter === 'warnings') return (item.warnings || []).length > 0;
                return item.kind === filter;
            });
        }

        function renderProjectImportItems() {
            const tbody = document.getElementById('project-import-items');
            const rows = projectImportVisibleItems().map((item) => {
                const index = projectImportState.items.indexOf(item);
                const disabled = item.kind === 'skipped' ? 'disabled' : '';
                const editable = item.kind === 'playbook' || item.kind === 'inventory';
                const target = editable
                    ? `<input type="text" class="form-control" value="${escapeHtml(item.target)}" onchange="projectImportState.items[${index}].target = this.value.trim()">`
                    : escapeHtml(item.target);
                const notes = []
                    .concat(item.exists ? ['Уже существует в AWM'] : [])
                    .concat(item.warnings || [])
                    .map((w) => `<div>${escapeHtml(w)}</div>`)
                    .join('');
                return `<tr>
                    <td><input type="checkbox" ${item.selected ? 'checked' : ''} ${disabled} onchange="projectImportState.items[${index}].selected = this.checked"></td>
                    <td>${PROJECT_IMPORT_KIND_TITLES[item.kind] || escapeHtml(item.kind)}</td>
                    <td><code>${escapeHtml(item.id)}</code></td>
                    <td>${target}</td>
                    <td class="form-hint">${notes}</td>
                </tr>`;
            });
            tbody.innerHTML = rows.join('') || '<tr><td colspan="5" class="form-hint">Нет элементов</td></tr>';
            document.getElementById('project-import-check-all').checked = false;
        }

        function toggleProjectImportAll(checked) {
            projectImportVisibleItems().forEach((item) => {
                if (item.kind !== 'skipped') item.selected = checked;
            });
            renderProjectImportItems();
            document.getElementById('project-import-check-all').checked = checked;
        }

        async function applyProjectImport() {
            const selectedItems = projectImportState.items.filter((item) => item.selected && item.kind !== 'skipped');
            if (!selectedItems.length) {
                alert('Не выбрано ни одного элемента');
                return;
            }
            const targets = {};
            selectedItems.forEach((item) => {
                if (item.kind === 'playbook' || item.kind === 'inventory') targets[item.id] = item.target;
            });
            const groupValue = document.getElementById('project-import-group').value;
            const btn = document.getElementById('project-import-apply-btn');
            btn.disabled = true;
            try {
                await apiCall('POST', `/api/ansible-import/${projectImportState.jobId}/apply`, {
                    selected: selectedItems.map((item) => item.id),
                    targets,
                    conflict: document.getElementById('project-import-conflict').value,
                    group_id: groupValue ? Number(groupValue) : null,
                    extra_tags: document.getElementById('project-import-tags').value.trim() || null,
                });
                document.getElementById('project-import-results').innerHTML = '';
                document.getElementById('project-import-report-btn').disabled = true;
                showProjectImportStep('result');
                pollProjectImport();
            } catch (error) {
                alert('Ошибка запуска импорта: ' + error.message);
            } finally {
                btn.disabled = false;
            }
        }

        async function pollProjectImport() {
            const progress = document.getElementById('project-import-progress');
            try {
                const state = await apiCall('GET', `/api/ansible-import/${projectImportState.jobId}`);
                if (state.status === 'running') {
                    progress.textContent = `Импорт выполняется: ${state.done || 0} из ${state.total || 0}`;
                    projectImportState.pollTimer = setTimeout(pollProjectImport, 1500);
                    return;
                }
                projectImportState.pollTimer = null;
                if (state.status === 'failed') {
                    progress.textContent = 'Импорт завершился ошибкой: ' + (state.error || '');
                    return;
                }
                const c = state.counts || {};
                progress.textContent = `Импорт завершён. Создано: ${c.created || 0}, обновлено: ${c.updated || 0}, пропущено: ${c.skipped || 0}, ошибок: ${c.error || 0}.`;
                renderProjectImportResults(state.results || []);
                document.getElementById('project-import-report-btn').disabled = false;
            } catch (error) {
                projectImportState.pollTimer = null;
                progress.textContent = 'Не удалось получить состояние импорта: ' + error.message;
            }
        }

        function renderProjectImportResults(results) {
            const order = { error: 0, skipped: 1, created: 2, updated: 3 };
            const rows = results
                .slice()
                .sort((a, b) => (order[a.status] ?? 9) - (order[b.status] ?? 9))
                .map((r) => {
                    const st = PROJECT_IMPORT_STATUS[r.status] || PROJECT_IMPORT_STATUS.error;
                    const message = [r.message].concat(r.warnings || []).filter(Boolean).map(escapeHtml).join('<br>');
                    return `<tr>
                        <td><span class="status-badge ${st.cls}" style="margin-left:0;">${st.title}</span></td>
                        <td>${PROJECT_IMPORT_KIND_TITLES[r.kind] || escapeHtml(r.kind)}</td>
                        <td><code>${escapeHtml(r.id)}</code></td>
                        <td>${escapeHtml(r.target)}</td>
                        <td class="form-hint">${message}</td>
                    </tr>`;
                });
            document.getElementById('project-import-results').innerHTML = rows.join('');
        }

        async function downloadProjectImportReport() {
            try {
                await downloadArchive(`/api/ansible-import/${projectImportState.jobId}/report`, `ansible-import-${projectImportState.jobId.slice(0, 8)}.json`);
            } catch (error) {
                alert('Ошибка скачивания отчёта: ' + error.message);
            }
        }

        // Плейбуки
        let isLoadingPlaybooks = false;
        const playbooksPager = { limit: 20, offset: 0, total: 0, q: '' };

        function mountServerPager(pagerHostId, pagerState, onChange) {
            const host = document.getElementById(pagerHostId);
            if (!host || !window.awmPagination) return;
            if (pagerState.total <= pagerState.limit && pagerState.offset === 0) {
                host.innerHTML = pagerState.total ? `<div class="awm-pagination-meta only-meta">Всего: ${pagerState.total}</div>` : '';
                return;
            }
            host.innerHTML = window.awmPagination.renderBarHtml({
                total: pagerState.total,
                limit: pagerState.limit,
                offset: pagerState.offset,
                idPrefix: pagerHostId,
            });
            window.awmPagination.bindBar(host, pagerState, (next) => onChange(next));
        }

        async function loadPlaybooks(resetPage) {
            // Предотвращаем множественные одновременные загрузки
            if (isLoadingPlaybooks) {
                console.log('[PLAYBOOKS] Already loading, skipping...');
                return;
            }
            
            isLoadingPlaybooks = true;
            const list = document.getElementById('playbooks-list');
            if (resetPage) playbooksPager.offset = 0;
            
            try {
                list.innerHTML = '<div class="empty-state"><p>Загрузка плейбуков...</p></div>';
                const query = window.awmPagination.buildQuery({
                    limit: playbooksPager.limit,
                    offset: playbooksPager.offset,
                    q: playbooksPager.q || undefined,
                });
                const data = await apiCall('GET', `/api/playbooks${query}`);
                const playbooks = data.playbooks || [];
                playbooksPager.total = Number(data.total ?? playbooks.length);
                
                if (playbooks.length === 0) {
                    list.innerHTML = '<div class="empty-state"><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Плейбуки отсутствуют</p><p>Создайте плейбук в конструкторе или вручную</p></div>';
                    mountServerPager('playbooks-list-pager', playbooksPager, (next) => {
                        playbooksPager.limit = next.limit;
                        playbooksPager.offset = next.offset;
                        loadPlaybooks(false);
                    });
                    isLoadingPlaybooks = false;
                    return;
                }
                
                list.innerHTML = 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.icon || '📘'} ${pb.name || `Без имени (#${pb.id})`}</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.notes ? `<span class="meta-item"><strong>Заметки:</strong> ${pb.notes}</span>` : ''}
                                ${pb.tags ? `<span class="meta-item"><strong>Теги:</strong> ${pb.tags}</span>` : ''}
                                <span class="meta-item"><strong>Доступ:</strong> ${pb.access_scope === 'group' ? 'Групповой' : 'Личный'}</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 || '')}" data-id="${pb.id}">
                                Удалить
                            </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') || '');
                    const resourceId = btn.getAttribute('data-id') || '';
                    console.log('[PLAYBOOKS] List click handler:', { 
                        isDelete, 
                        isEdit, 
                        name, 
                        target: e.target, 
                        button: btn 
                    });
                    
                    if (isDelete) {
                        console.log('[PLAYBOOKS] Delete action triggered for:', name, resourceId);
                        if (typeof deletePlaybook === 'function') {
                            deletePlaybook(name, resourceId);
                        } 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', playbooks.length, 'playbooks, found', deleteButtons.length, 'delete buttons and', editButtons.length, 'edit buttons');
                mountServerPager('playbooks-list-pager', playbooksPager, (next) => {
                    playbooksPager.limit = next.limit;
                    playbooksPager.offset = next.offset;
                    loadPlaybooks(false);
                });
                
                isLoadingPlaybooks = false;
                updateStats();
            } catch (error) {
                console.error('[PLAYBOOKS] Error loading playbooks:', error);
                const list = document.getElementById('playbooks-list');
                list.innerHTML = `<div class="empty-state"><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 || '';
                    document.getElementById('playbook-notes').value = data.notes || '';
                    document.getElementById('playbook-group-id').value = data.group_id || '';
                    renderResourceIconsOptions('playbook-icon', data.icon || '');
                });
            } else {
                title.textContent = 'Создать плейбук';
                nameInput.disabled = false;
                form.reset();
                renderResourceIconsOptions('playbook-icon');
            }
            
            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;
            const notes = document.getElementById('playbook-notes').value;
            const groupIdRaw = document.getElementById('playbook-group-id').value;
            const groupId = groupIdRaw ? Number(groupIdRaw) : null;
            const icon = document.getElementById('playbook-icon').value || null;
            
            try {
                if (currentPlaybookName) {
                    await apiCall('PUT', `/api/playbooks/${currentPlaybookName}`, { content, description, notes, group_id: groupId, icon });
                } else {
                    await apiCall('POST', '/api/playbooks', { name, content, description, notes, group_id: groupId, icon });
                }
                closePlaybookModal();
                loadPlaybooks();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

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

        async function deletePlaybook(name, playbookId = null) {
            const title = name || `#${playbookId}`;
            console.log('deletePlaybook called with:', { name, playbookId });
            if (!await awmConfirm(`Удалить плейбук "${title}"?`)) {
                console.log('Delete cancelled by user');
                return;
            }
            try {
                let result;
                if (!name && playbookId) {
                    result = await apiCall('DELETE', `/api/playbooks/id/${playbookId}`);
                } else {
                    const encodedName = encodeURIComponent(name);
                    result = await apiCall('DELETE', `/api/playbooks/${encodedName}`);
                }
                console.log('Delete result:', result);
                loadPlaybooks();
            } catch (error) {
                console.error('Error deleting playbook:', error);
                alert('Ошибка при удалении плейбука: ' + error.message);
            }
        }

        // Инвентори
        const inventoriesPager = { limit: 20, offset: 0, total: 0, q: '' };
        async function loadInventories(resetPage) {
            const list = document.getElementById('inventories-list');
            if (resetPage) inventoriesPager.offset = 0;
            try {
                const query = window.awmPagination.buildQuery({
                    limit: inventoriesPager.limit,
                    offset: inventoriesPager.offset,
                    q: inventoriesPager.q || undefined,
                });
                const data = await apiCall('GET', `/api/inventories${query}`);
                const inventories = data.inventories || [];
                inventoriesPager.total = Number(data.total ?? inventories.length);
                
                if (inventories.length === 0) {
                    list.innerHTML = '<div class="empty-state"><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Инвентори отсутствуют</p><p>Создайте инвентори в конструкторе или вручную</p></div>';
                    mountServerPager('inventories-list-pager', inventoriesPager, (next) => {
                        inventoriesPager.limit = next.limit;
                        inventoriesPager.offset = next.offset;
                        loadInventories(false);
                    });
                    return;
                }
                
                list.innerHTML = 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.icon || '📋'} ${inv.name || `Без имени (#${inv.id})`} <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')} | Доступ: ${inv.access_scope === 'group' ? 'Групповой' : 'Личный'}</div>
                        </div>
                        <div class="list-item-actions">
                            <button class="btn btn-primary btn-sm inventory-edit-btn" data-name="${encodeURIComponent(inv.name)}">
                                <span class="ui-icon">✏</span> Редактировать
                            </button>
                            <button class="btn btn-danger btn-sm inventory-delete-btn" data-name="${encodeURIComponent(inv.name || '')}" data-id="${inv.id}">
                                <span class="ui-icon">🗑</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') || '');
                    const resourceId = btn.getAttribute('data-id') || '';
                    console.log('[INVENTORIES] List click handler:', { 
                        isDelete, 
                        isEdit, 
                        name, 
                        target: e.target, 
                        button: btn 
                    });
                    
                    if (isDelete) {
                        console.log('[INVENTORIES] Delete action triggered for:', name, resourceId);
                        btn._processing = true;
                        setTimeout(() => { btn._processing = false; }, 1000);
                        if (typeof deleteInventory === 'function') {
                            deleteInventory(name, resourceId);
                        } 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', inventories.length, 'inventories, found', deleteButtons.length, 'delete buttons and', editButtons.length, 'edit buttons');
                mountServerPager('inventories-list-pager', inventoriesPager, (next) => {
                    inventoriesPager.limit = next.limit;
                    inventoriesPager.offset = next.offset;
                    loadInventories(false);
                });
                updateStats();
            } catch (error) {
                awmRenderError(document.getElementById('inventories-list'), error);
            }
        }

        function openInventoryModal(name = null) {
            const loadToken = ++inventoryModalLoadToken;
            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 => {
                    if (loadToken !== inventoryModalLoadToken) return;
                    if (currentInventoryName !== name) return;
                    contentInput.value = data.content;
                    typeInput.value = data.type;
                    document.getElementById('inventory-description').value = data.description || '';
                    document.getElementById('inventory-notes').value = data.notes || '';
                    document.getElementById('inventory-group-id').value = data.group_id || '';
                    renderResourceIconsOptions('inventory-icon', data.icon || '');
                });
            } else {
                title.textContent = 'Создать инвентори';
                nameInput.disabled = false;
                form.reset();
                renderResourceIconsOptions('inventory-icon');
            }
            
            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;
            const notes = document.getElementById('inventory-notes').value;
            const groupIdRaw = document.getElementById('inventory-group-id').value;
            const groupId = groupIdRaw ? Number(groupIdRaw) : null;
            const icon = document.getElementById('inventory-icon').value || null;
            
            try {
                if (currentInventoryName) {
                    await apiCall('PUT', `/api/inventories/${currentInventoryName}`, { content, inventory_type: type, description, notes, group_id: groupId, icon });
                } else {
                    await apiCall('POST', '/api/inventories', { name, content, inventory_type: type, description, notes, group_id: groupId, icon });
                }
                closeInventoryModal();
                loadInventories();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

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

        // Флаг для предотвращения множественных подтверждений
        let deletingInventory = false;
        
        async function deleteInventory(name, inventoryId = null) {
            // Предотвращаем множественные вызовы
            if (deletingInventory) {
                console.log('Delete already in progress');
                return;
            }
            
            const title = name || `#${inventoryId}`;
            console.log('deleteInventory called with:', { name, inventoryId });
            if (!await awmConfirm(`Удалить инвентори "${title}"?`)) {
                console.log('Delete cancelled by user');
                return;
            }
            
            deletingInventory = true;
            try {
                let result;
                if (!name && inventoryId) {
                    result = await apiCall('DELETE', `/api/inventories/id/${inventoryId}`);
                } else {
                    const encodedName = encodeURIComponent(name);
                    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;
            }
        }

        const terminalRunStatuses = new Set(['success', 'failed', 'cancelled']);

        const runsPager = { limit: 20, offset: 0, total: 0, q: '' };
        // Запуски
        async function loadRuns(resetPage) {
            const list = document.getElementById('runs-list');
            if (resetPage) runsPager.offset = 0;
            try {
                const query = window.awmPagination.buildQuery({
                    limit: runsPager.limit,
                    offset: runsPager.offset,
                    q: runsPager.q || undefined,
                });
                const data = await apiCall('GET', `/api/runs${query}`);
                const runs = data.runs || [];
                runsPager.total = Number(data.total ?? runs.length);
                
                if (runs.length === 0) {
                    list.innerHTML = '<div class="empty-state"><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Нет запусков</p><p>Запустите плейбук для просмотра истории выполнения</p></div>';
                    mountServerPager('runs-list-pager', runsPager, (next) => {
                        runsPager.limit = next.limit;
                        runsPager.offset = next.offset;
                        loadRuns(false);
                    });
                    return;
                }
                
                list.innerHTML = runs.map(run => {
                    const rawStatus = String(run.status || 'pending');
                    const statusKey = (rawStatus.includes('.') ? rawStatus.split('.').pop() : rawStatus).toLowerCase();
                    const statusClass = `status-${statusKey}`;
                    const statusLabel = ({
                        pending: 'Ожидание',
                        running: 'Выполняется',
                        success: 'Успешно',
                        failed: 'Ошибка',
                        cancelled: 'Отменено',
                    })[statusKey] || statusKey;
                    const canRetry = statusKey === 'failed' || statusKey === 'success' || statusKey === 'cancelled';
                    const canCancel = ['pending', 'running', 'cancelling'].includes(statusKey)
                        || (!run.finished_at && statusKey !== 'failed' && statusKey !== '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}">${statusLabel}</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" style="flex-wrap: wrap;">
                                <button class="btn btn-primary btn-sm" onclick="viewRunLog('${run.id}')">
                                    <span>📄</span> Лог
                                </button>
                                ${canRetry && !canCancel ? `<button class="btn btn-success btn-sm" onclick="retryRun('${run.id}')">
                                    <span>🔄</span> Повторить
                                </button>` : ''}
                                ${canCancel ? `<button class="btn btn-danger btn-sm" onclick="cancelRun('${run.id}')">
                                    <span>⏹</span> Остановить
                                </button>
                                <button class="btn btn-danger btn-sm" onclick="forceStopRun('${run.id}')">
                                    Остановить принудительно
                                </button>` : ''}
                            </div>
                        </div>
                    `;
                }).join('');
                mountServerPager('runs-list-pager', runsPager, (next) => {
                    runsPager.limit = next.limit;
                    runsPager.offset = next.offset;
                    loadRuns(false);
                });
            } catch (error) {
                awmRenderError(document.getElementById('runs-list'), error);
            }
        }

        async function loadInlineTemplates() {
            const list = document.getElementById('templates-inline-list');
            if (!list) return;
            try {
                const data = await apiCall('GET', '/api/playbook-templates');
                const items = Array.isArray(data.items) ? data.items : [];
                if (!items.length) {
                    list.innerHTML = '<div class="empty-state">Шаблоны отсутствуют</div>';
                    return;
                }
                list.innerHTML = `
                    <table style="width:100%; border-collapse:collapse;">
                        <thead>
                            <tr>
                                <th style="text-align:left; padding:8px; border-bottom:1px solid var(--border);">Название</th>
                                <th style="text-align:left; padding:8px; border-bottom:1px solid var(--border);">Категория</th>
                                <th style="text-align:left; padding:8px; border-bottom:1px solid var(--border);">Описание</th>
                                <th style="text-align:right; padding:8px; border-bottom:1px solid var(--border);">Действия</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${items.map((t) => `
                                <tr>
                                    <td style="padding:8px; border-bottom:1px solid var(--border);">${escapeHtml(t.name || '')}</td>
                                    <td style="padding:8px; border-bottom:1px solid var(--border);">${escapeHtml(t.category || 'general')}</td>
                                    <td style="padding:8px; border-bottom:1px solid var(--border);">${escapeHtml(t.description || '-')}</td>
                                    <td style="padding:8px; border-bottom:1px solid var(--border); text-align:right;">
                                        <button class="btn btn-secondary btn-sm" onclick="openTemplateEditPrompt(${Number(t.id)})">Редактировать</button>
                                        <button class="btn btn-danger btn-sm" onclick="deleteInlineTemplate(${Number(t.id)})">Удалить</button>
                                    </td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                `;
            } catch (error) {
                list.innerHTML = `<div class="empty-state">Ошибка загрузки шаблонов: ${escapeHtml(error.message || 'unknown')}</div>`;
            }
        }

        const INLINE_TEMPLATE_LIBRARY = [
            {
                name: 'Nginx + UFW базовый деплой',
                category: 'devops/web',
                description: 'Установка Nginx, включение сервиса и открытие порта 80.',
                template_data: {
                    name: 'deploy-nginx',
                    hosts: 'web',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install nginx', module: 'apt', params: { package_name: 'nginx', package_state: 'present', update_cache: true } },
                        { name: 'Enable nginx', module: 'service', params: { service_name: 'nginx', service_state: 'started', enabled: true } },
                        { name: 'Open 80/tcp', module: 'command', params: { command: 'ufw allow 80/tcp' } }
                    ]
                }
            },
            {
                name: 'Apache2 базовый деплой',
                category: 'devops/web',
                description: 'Установка Apache2 и открытие HTTP-порта.',
                template_data: {
                    name: 'deploy-apache2',
                    hosts: 'web',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install apache2', module: 'apt', params: { package_name: 'apache2', package_state: 'present', update_cache: true } },
                        { name: 'Enable apache2', module: 'service', params: { service_name: 'apache2', service_state: 'started', enabled: true } },
                        { name: 'Open 80/tcp', module: 'command', params: { command: 'ufw allow 80/tcp' } }
                    ]
                }
            },
            {
                name: 'Docker engine install',
                category: 'devops/containers',
                description: 'Установка docker.io и запуск docker daemon.',
                template_data: {
                    name: 'install-docker',
                    hosts: 'docker_hosts',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install docker', module: 'apt', params: { package_name: 'docker.io', package_state: 'present', update_cache: true } },
                        { name: 'Start docker', module: 'service', params: { service_name: 'docker', service_state: 'started', enabled: true } }
                    ]
                }
            },
            {
                name: 'Docker compose plugin',
                category: 'devops/containers',
                description: 'Установка docker-compose-plugin.',
                template_data: {
                    name: 'install-docker-compose-plugin',
                    hosts: 'docker_hosts',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install compose plugin', module: 'apt', params: { package_name: 'docker-compose-plugin', package_state: 'present', update_cache: true } }
                    ]
                }
            },
            {
                name: 'Node Exporter deploy',
                category: 'devops/monitoring',
                description: 'Создание пользователя exporter и systemd-конфига.',
                template_data: {
                    name: 'deploy-node-exporter',
                    hosts: 'monitoring_targets',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Create user', module: 'user', params: { user_name: 'node_exporter', user_state: 'present' } },
                        { name: 'Create dir', module: 'file', params: { path: '/opt/node_exporter', state: 'directory', mode: '0755' } },
                        { name: 'Drop unit file', module: 'copy', params: { src: 'files/node_exporter.service', dest: '/etc/systemd/system/node_exporter.service', mode: '0644' } },
                        { name: 'Reload daemon', module: 'command', params: { command: 'systemctl daemon-reload' } },
                        { name: 'Enable service', module: 'service', params: { service_name: 'node_exporter', service_state: 'started', enabled: true } }
                    ]
                }
            },
            {
                name: 'Zabbix agent install',
                category: 'devops/monitoring',
                description: 'Установка zabbix-agent и запуск сервиса.',
                template_data: {
                    name: 'install-zabbix-agent',
                    hosts: 'linux',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install zabbix-agent', module: 'apt', params: { package_name: 'zabbix-agent', package_state: 'present', update_cache: true } },
                        { name: 'Enable zabbix-agent', module: 'service', params: { service_name: 'zabbix-agent', service_state: 'started', enabled: true } }
                    ]
                }
            },
            {
                name: 'Git pull + service restart',
                category: 'devops/release',
                description: 'Обновить приложение из Git и перезапустить сервис.',
                template_data: {
                    name: 'git-pull-restart',
                    hosts: 'app',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Pull repository', module: 'git', params: { repo: 'https://git.example.local/team/app.git', dest: '/opt/app', version: 'main' } },
                        { name: 'Restart app', module: 'service', params: { service_name: 'app', service_state: 'restarted', enabled: true } }
                    ]
                }
            },
            {
                name: 'Blue/green symlink release',
                category: 'devops/release',
                description: 'Переключение current-ссылки на новый релиз.',
                template_data: {
                    name: 'release-switch-symlink',
                    hosts: 'app',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Ensure releases dir', module: 'file', params: { path: '/opt/app/releases', state: 'directory', mode: '0755' } },
                        { name: 'Switch current symlink', module: 'command', params: { command: 'ln -sfn /opt/app/releases/latest /opt/app/current' } },
                        { name: 'Restart app', module: 'service', params: { service_name: 'app', service_state: 'restarted', enabled: true } }
                    ]
                }
            },
            {
                name: 'Users baseline (SRE)',
                category: 'admin/users',
                description: 'Создать технического пользователя и директорию ssh.',
                template_data: {
                    name: 'bootstrap-sre-user',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Create user', module: 'user', params: { user_name: 'sre', user_state: 'present', groups: 'sudo' } },
                        { name: 'Create .ssh', module: 'file', params: { path: '/home/sre/.ssh', state: 'directory', mode: '0700' } }
                    ]
                }
            },
            {
                name: 'Создать пользователя с sudo',
                category: 'admin/users',
                description: 'Создание пользователя, группы sudo и домашней директории.',
                template_data: {
                    name: 'create-user-sudo',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Create user', module: 'user', params: { user_name: 'devops', user_state: 'present', groups: 'sudo' } },
                        { name: 'Create home ssh dir', module: 'file', params: { path: '/home/devops/.ssh', state: 'directory', mode: '0700' } }
                    ]
                }
            },
            {
                name: 'Удалить пользователя',
                category: 'admin/users',
                description: 'Удаление пользователя из системы.',
                template_data: {
                    name: 'remove-user',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Remove user', module: 'user', params: { user_name: 'olduser', user_state: 'absent' } }
                    ]
                }
            },
            {
                name: 'Создать служебную группу',
                category: 'admin/users',
                description: 'Создание системной группы для приложения.',
                template_data: {
                    name: 'create-system-group',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Create group', module: 'group', params: { group_name: 'appgroup', group_state: 'present' } }
                    ]
                }
            },
            {
                name: 'Пакеты baseline (common tools)',
                category: 'admin/packages',
                description: 'Установка базовых утилит администрирования.',
                template_data: {
                    name: 'install-common-tools',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install curl', module: 'apt', params: { package_name: 'curl', package_state: 'present', update_cache: true } },
                        { name: 'Install jq', module: 'apt', params: { package_name: 'jq', package_state: 'present', update_cache: false } },
                        { name: 'Install htop', module: 'apt', params: { package_name: 'htop', package_state: 'present', update_cache: false } }
                    ]
                }
            },
            {
                name: 'Обновить все пакеты до latest',
                category: 'admin/packages',
                description: 'Обновление кэша и системных пакетов.',
                template_data: {
                    name: 'upgrade-packages',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Upgrade all packages', module: 'apt', params: { package_name: '*', package_state: 'latest', update_cache: true } }
                    ]
                }
            },
            {
                name: 'Удалить пакет',
                category: 'admin/packages',
                description: 'Удаление ненужного пакета.',
                template_data: {
                    name: 'remove-package',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Remove package', module: 'apt', params: { package_name: 'apache2', package_state: 'absent', update_cache: false } }
                    ]
                }
            },
            {
                name: 'Systemd reload + restart',
                category: 'admin/systemd',
                description: 'Обновление unit-файла и рестарт службы.',
                template_data: {
                    name: 'systemd-reload-restart',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Deploy service file', module: 'copy', params: { src: 'files/app.service', dest: '/etc/systemd/system/app.service', mode: '0644' } },
                        { name: 'Reload systemd', module: 'command', params: { command: 'systemctl daemon-reload' } },
                        { name: 'Restart service', module: 'service', params: { service_name: 'app', service_state: 'restarted', enabled: true } }
                    ]
                }
            },
            {
                name: 'NTP baseline (chrony)',
                category: 'admin/system',
                description: 'Установка chrony и запуск синхронизации времени.',
                template_data: {
                    name: 'ntp-chrony-baseline',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install chrony', module: 'apt', params: { package_name: 'chrony', package_state: 'present', update_cache: true } },
                        { name: 'Start chrony', module: 'service', params: { service_name: 'chrony', service_state: 'started', enabled: true } }
                    ]
                }
            },
            {
                name: 'Firewall baseline (UFW)',
                category: 'admin/security',
                description: 'Открыть SSH/HTTP/HTTPS и включить UFW.',
                template_data: {
                    name: 'ufw-baseline',
                    hosts: 'all',
                    gather_facts: false,
                    become: true,
                    task_modules: [
                        { name: 'Allow SSH', module: 'command', params: { command: 'ufw allow 22/tcp' } },
                        { name: 'Allow HTTP', module: 'command', params: { command: 'ufw allow 80/tcp' } },
                        { name: 'Allow HTTPS', module: 'command', params: { command: 'ufw allow 443/tcp' } },
                        { name: 'Enable ufw', module: 'command', params: { command: 'ufw --force enable' } }
                    ]
                }
            },
            {
                name: 'Fail2ban install',
                category: 'admin/security',
                description: 'Установка fail2ban и запуск службы.',
                template_data: {
                    name: 'install-fail2ban',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install fail2ban', module: 'apt', params: { package_name: 'fail2ban', package_state: 'present', update_cache: true } },
                        { name: 'Enable fail2ban', module: 'service', params: { service_name: 'fail2ban', service_state: 'started', enabled: true } }
                    ]
                }
            },
            {
                name: 'SSH hardening baseline',
                category: 'admin/security',
                description: 'Применить базовые SSH-параметры и перезапустить sshd.',
                template_data: {
                    name: 'ssh-hardening',
                    hosts: 'all',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Disable root login', module: 'lineinfile', params: { path: '/etc/ssh/sshd_config', regexp: '^#?PermitRootLogin', line: 'PermitRootLogin no' } },
                        { name: 'Disable password auth', module: 'lineinfile', params: { path: '/etc/ssh/sshd_config', regexp: '^#?PasswordAuthentication', line: 'PasswordAuthentication no' } },
                        { name: 'Restart ssh', module: 'service', params: { service_name: 'ssh', service_state: 'restarted', enabled: true } }
                    ]
                }
            },
            {
                name: 'Создать структуру директорий приложения',
                category: 'devops/filesystem',
                description: 'Подготовка /opt/app и /opt/app/releases.',
                template_data: {
                    name: 'create-app-dirs',
                    hosts: 'app',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Create /opt/app', module: 'file', params: { path: '/opt/app', state: 'directory', mode: '0755' } },
                        { name: 'Create releases', module: 'file', params: { path: '/opt/app/releases', state: 'directory', mode: '0755' } }
                    ]
                }
            },
            {
                name: 'Развернуть конфиг из шаблона',
                category: 'devops/config',
                description: 'Развернуть Jinja2 шаблон конфигурации.',
                template_data: {
                    name: 'deploy-config-template',
                    hosts: 'app',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Render template', module: 'template', params: { src: 'templates/app.conf.j2', dest: '/etc/app/app.conf' } },
                        { name: 'Restart service', module: 'service', params: { service_name: 'app', service_state: 'restarted', enabled: true } }
                    ]
                }
            },
            {
                name: 'Скопировать артефакт релиза',
                category: 'devops/release',
                description: 'Копирование релизного файла на хост.',
                template_data: {
                    name: 'copy-artifact',
                    hosts: 'app',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Copy artifact', module: 'copy', params: { src: 'files/app.tar.gz', dest: '/opt/app/app.tar.gz', mode: '0644' } }
                    ]
                }
            },
            {
                name: 'Kubernetes tools (kubectl + helm)',
                category: 'devops/kubernetes',
                description: 'Установка kubectl и helm (базовый bootstrap).',
                template_data: {
                    name: 'install-k8s-tools',
                    hosts: 'k8s_admin',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install kubectl', module: 'apt', params: { package_name: 'kubectl', package_state: 'present', update_cache: true } },
                        { name: 'Install helm', module: 'apt', params: { package_name: 'helm', package_state: 'present', update_cache: false } }
                    ]
                }
            },
            {
                name: 'K3s server install',
                category: 'devops/kubernetes',
                description: 'Установка single-node k3s кластера.',
                template_data: {
                    name: 'install-k3s-server',
                    hosts: 'k3s_server',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install k3s', module: 'command', params: { command: 'curl -sfL https://get.k3s.io | sh -' } },
                        { name: 'Enable k3s', module: 'service', params: { service_name: 'k3s', service_state: 'started', enabled: true } }
                    ]
                }
            },
            {
                name: 'PostgreSQL server install',
                category: 'admin/database',
                description: 'Установка PostgreSQL и запуск сервиса.',
                template_data: {
                    name: 'install-postgresql',
                    hosts: 'db',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install postgresql', module: 'apt', params: { package_name: 'postgresql', package_state: 'present', update_cache: true } },
                        { name: 'Enable postgresql', module: 'service', params: { service_name: 'postgresql', service_state: 'started', enabled: true } }
                    ]
                }
            },
            {
                name: 'Redis install',
                category: 'admin/database',
                description: 'Установка Redis и запуск сервиса.',
                template_data: {
                    name: 'install-redis',
                    hosts: 'cache',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Install redis-server', module: 'apt', params: { package_name: 'redis-server', package_state: 'present', update_cache: true } },
                        { name: 'Enable redis', module: 'service', params: { service_name: 'redis-server', service_state: 'started', enabled: true } }
                    ]
                }
            },
            {
                name: 'Backup rsync to NAS',
                category: 'admin/backup',
                description: 'Архив + rsync копия на сетевое хранилище.',
                template_data: {
                    name: 'backup-rsync-nas',
                    hosts: 'app',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Create backup archive', module: 'command', params: { command: 'tar -czf /tmp/app-backup.tgz /opt/app' } },
                        { name: 'Rsync to nas', module: 'command', params: { command: 'rsync -av /tmp/app-backup.tgz backup@nas:/backups/app/' } }
                    ]
                }
            },
            {
                name: 'Логи и диагностика сервера',
                category: 'admin/ops',
                description: 'Сбор базовых диагностик по CPU/RAM/Disk/Systemd.',
                template_data: {
                    name: 'ops-diagnostics',
                    hosts: 'all',
                    gather_facts: false,
                    become: true,
                    task_modules: [
                        { name: 'CPU info', module: 'command', params: { command: 'lscpu' } },
                        { name: 'Memory info', module: 'command', params: { command: 'free -m' } },
                        { name: 'Disk info', module: 'command', params: { command: 'df -h' } },
                        { name: 'Failed services', module: 'command', params: { command: 'systemctl --failed' } }
                    ]
                }
            },
            {
                name: 'Очистка Docker ресурсов',
                category: 'devops/containers',
                description: 'Удаление dangling images/containers/volumes.',
                template_data: {
                    name: 'docker-prune',
                    hosts: 'docker_hosts',
                    gather_facts: true,
                    become: true,
                    task_modules: [
                        { name: 'Docker system prune', module: 'command', params: { command: 'docker system prune -af' } },
                        { name: 'Docker volume prune', module: 'command', params: { command: 'docker volume prune -f' } }
                    ]
                }
            },
            {
                name: 'Kubernetes namespace bootstrap',
                category: 'devops/kubernetes',
                description: 'Создание namespace и базовых label.',
                template_data: {
                    name: 'k8s-namespace-bootstrap',
                    hosts: 'k8s_admin',
                    gather_facts: true,
                    become: false,
                    task_modules: [
                        { name: 'Create namespace', module: 'command', params: { command: 'kubectl create namespace app-dev --dry-run=client -o yaml | kubectl apply -f -' } },
                        { name: 'Label namespace', module: 'command', params: { command: 'kubectl label namespace app-dev env=dev owner=platform --overwrite' } }
                    ]
                }
            }
        ];

        function openInlineLibraryModal() {
            const list = document.getElementById('inline-library-list');
            if (!list) return;
            list.innerHTML = INLINE_TEMPLATE_LIBRARY.map((item, index) => `
                <div class="card" style="margin-bottom:10px;">
                    <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;">
                        <div>
                            <div style="font-weight:700;">${escapeHtml(item.name)}</div>
                            <div style="font-size:12px; color:var(--gray-600);">${escapeHtml(item.category)}</div>
                            <div style="margin-top:4px;">${escapeHtml(item.description || '')}</div>
                        </div>
                        <div style="display:flex; gap:8px;">
                            <button class="btn btn-secondary btn-sm" type="button" onclick="previewInlineLibraryTemplate(${index})">Предпросмотр</button>
                            <button class="btn btn-success btn-sm" type="button" onclick="applyInlineLibraryTemplate(${index})">Добавить</button>
                        </div>
                    </div>
                </div>
            `).join('');
            document.getElementById('inline-library-modal').classList.add('active');
        }

        function closeInlineLibraryModal() {
            document.getElementById('inline-library-modal').classList.remove('active');
        }

        function previewInlineLibraryTemplate(index) {
            const item = INLINE_TEMPLATE_LIBRARY[index];
            if (!item) return;
            const json = JSON.stringify(item.template_data || {}, null, 2);
            alert(`Шаблон: ${item.name}\n\n${json}`);
        }

        async function applyInlineLibraryTemplate(index) {
            const item = INLINE_TEMPLATE_LIBRARY[index];
            if (!item) return;
            const newName = ((await awmPrompt('Название нового шаблона:', item.name || '')) || '').trim();
            if (!newName) return;
            await apiCall('POST', '/api/playbook-templates', {
                name: newName,
                category: item.category || 'general',
                description: item.description || '',
                template_data: item.template_data || {},
            });
            closeInlineLibraryModal();
            await loadInlineTemplates();
            await loadCustomPlaybookTemplates();
        }

        async function openTemplateCreatePrompt() {
            const name = ((await awmPrompt('Название шаблона:')) || '').trim();
            if (!name) return;
            const category = ((await awmPrompt('Категория шаблона:', 'general')) || 'general').trim() || 'general';
            const description = ((await awmPrompt('Описание шаблона:', '')) || '').trim();
            const hosts = ((await awmPrompt('Хосты:', 'all')) || 'all').trim() || 'all';
            await apiCall('POST', '/api/playbook-templates', {
                name,
                category,
                description,
                template_data: {
                    name,
                    hosts,
                    gather_facts: true,
                    become: false,
                    task_modules: [],
                },
            });
            await loadInlineTemplates();
            await loadCustomPlaybookTemplates();
        }

        async function openTemplateEditPrompt(templateId) {
            const data = await apiCall('GET', '/api/playbook-templates');
            const item = (Array.isArray(data.items) ? data.items : []).find((x) => Number(x.id) === Number(templateId));
            if (!item) {
                alert('Шаблон не найден');
                return;
            }
            const name = ((await awmPrompt('Название шаблона:', item.name || '')) || '').trim();
            if (!name) return;
            const category = ((await awmPrompt('Категория шаблона:', item.category || 'general')) || 'general').trim() || 'general';
            const description = ((await awmPrompt('Описание шаблона:', item.description || '')) || '').trim();
            await apiCall('PUT', `/api/playbook-templates/${templateId}`, {
                name,
                category,
                description,
                template_data: item.template_data || {},
            });
            await loadInlineTemplates();
            await loadCustomPlaybookTemplates();
        }

        async function deleteInlineTemplate(templateId) {
            if (!await awmConfirm('Удалить шаблон?')) return;
            await apiCall('DELETE', `/api/playbook-templates/${templateId}`);
            await loadInlineTemplates();
            await loadCustomPlaybookTemplates();
        }

        async function loadPlaybookSchedules() {
            try {
                const data = await apiCall('GET', '/api/schedules?job_type=playbook');
                const list = document.getElementById('playbook-schedules-list');
                const items = data.items || [];
                if (!items.length) {
                    list.innerHTML = '<div class="empty-state">Нет запланированных запусков</div>';
                    return;
                }
                list.innerHTML = items.map(item => `
                    <div class="list-item">
                        <div class="list-item-info">
                            <div class="list-item-name">${item.name} <span class="status-badge ${item.is_active ? 'status-success' : 'status-cancelled'}">${item.is_active ? 'active' : 'paused'}</span></div>
                            <div class="list-item-meta">Следующий запуск: ${item.next_run_at ? new Date(item.next_run_at).toLocaleString('ru') : '—'} | TZ: ${item.timezone} | Режим: ${item.mode}</div>
                        </div>
                        <div class="list-item-actions">
                            <button class="btn btn-secondary btn-sm" onclick="togglePlaybookSchedule(${item.id}, ${item.is_active ? 'false' : 'true'})">${item.is_active ? 'Пауза' : 'Старт'}</button>
                            <button class="btn btn-danger btn-sm" onclick="deletePlaybookSchedule(${item.id})">Удалить</button>
                        </div>
                    </div>
                `).join('');
            } catch (error) {
                awmRenderError(document.getElementById('playbook-schedules-list'), error);
            }
        }

        async function togglePlaybookSchedule(id, isActive) {
            await apiCall('PATCH', `/api/schedules/${id}/toggle`, { is_active: isActive });
            await loadPlaybookSchedules();
        }

        async function deletePlaybookSchedule(id) {
            if (!await awmConfirm('Удалить задачу расписания?')) return;
            await apiCall('DELETE', `/api/schedules/${id}`);
            await loadPlaybookSchedules();
        }

        async function openPlaybookScheduleModal() {
            if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) return;
            const [playbooks, inventories, meta] = await Promise.all([
                apiCall('GET', '/api/playbooks'),
                apiCall('GET', '/api/inventories'),
                apiCall('GET', '/api/schedules/meta')
            ]);
            document.getElementById('schedule-playbook').innerHTML = (playbooks.playbooks || []).map(pb => `<option value="${pb.name}">${pb.name}</option>`).join('');
            document.getElementById('schedule-inventory').innerHTML = '<option value="">Без инвентори</option>' + (inventories.inventories || []).map(inv => `<option value="${inv.name}">${inv.name} (${inv.type})</option>`).join('');
            const scheduleTz = (Intl.DateTimeFormat().resolvedOptions().timeZone || meta.server_timezone || 'UTC');
            if (window.awmTimezones) {
                window.awmTimezones.fillSelect(document.getElementById('schedule-timezone'), {
                    value: scheduleTz,
                    includeEmpty: false,
                });
            } else {
                document.getElementById('schedule-timezone').value = scheduleTz;
            }
            const now = new Date();
            document.getElementById('schedule-date').value = now.toISOString().slice(0, 10);
            document.getElementById('schedule-time').value = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
            document.getElementById('playbook-schedule-modal').classList.add('active');
        }

        function closePlaybookScheduleModal() {
            document.getElementById('playbook-schedule-modal').classList.remove('active');
            document.getElementById('playbook-schedule-form').reset();
            document.getElementById('schedule-interval-box').style.display = 'none';
        }

        async function openRunModal() {
            if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) {
                return;
            }
            // Загружаем списки плейбуков и инвентори
            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();
            if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) {
                return;
            }
            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);
            }
        });

        document.getElementById('schedule-mode').addEventListener('change', (e) => {
            document.getElementById('schedule-interval-box').style.display = e.target.value === 'interval' ? 'grid' : 'none';
        });

        document.getElementById('playbook-schedule-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const mode = document.getElementById('schedule-mode').value;
            const payload = {
                playbook_name: document.getElementById('schedule-playbook').value,
                inventory_name: document.getElementById('schedule-inventory').value || null,
                check_mode: document.getElementById('schedule-check-mode').checked,
                diff_mode: document.getElementById('schedule-diff-mode').checked,
                limit: document.getElementById('schedule-limit').value || null
            };
            const data = {
                name: document.getElementById('schedule-name').value,
                job_type: 'playbook',
                payload,
                timezone: document.getElementById('schedule-timezone').value,
                mode,
                start_at: `${document.getElementById('schedule-date').value}T${document.getElementById('schedule-time').value}`,
                interval_value: mode === 'interval' ? Number(document.getElementById('schedule-interval-value').value) : null,
                interval_unit: mode === 'interval' ? document.getElementById('schedule-interval-unit').value : null,
                is_active: true
            };
            await apiCall('POST', '/api/schedules', data);
            closePlaybookScheduleModal();
            await loadPlaybookSchedules();
        });

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

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

        async function retryRun(runId) {
            if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) {
                return;
            }
            if (!await awmConfirm('Повторить запуск с теми же параметрами?')) {
                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);
            }
        }

        async function cancelRun(runId) {
            if (!await awmConfirm('Остановить текущий запуск?')) {
                return;
            }
            try {
                await apiCall('POST', `/api/runs/${runId}/cancel`);
                await loadRuns();
            } catch (error) {
                alert('Ошибка остановки запуска: ' + error.message);
            }
        }

        async function forceStopRun(runId) {
            if (!await awmConfirm('Принудительно остановить запуск? Процесс будет завершён жёстко.')) {
                return;
            }
            try {
                await apiCall('POST', `/api/runs/${runId}/force-stop`);
                await loadRuns();
            } catch (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 = [];
        let availableSecretNames = [];
        let availableSecretsCache = [];
        let availableSSHKeyNames = [];
        let customPlaybookTemplates = [];

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

        async function loadCustomPlaybookTemplates() {
            try {
                const data = await apiCall('GET', '/api/playbook-templates');
                customPlaybookTemplates = data.items || [];
                const select = document.getElementById('builder-playbook-template');
                if (!select) return;
                select.innerHTML = '<option value="">Создать с нуля</option>';
                if (customPlaybookTemplates.length > 0) {
                    const group = document.createElement('optgroup');
                    group.label = 'Пользовательские шаблоны';
                    customPlaybookTemplates.forEach(tpl => {
                        const option = document.createElement('option');
                        option.value = `custom:${tpl.id}`;
                        option.textContent = tpl.category ? `[${tpl.category}] ${tpl.name}` : tpl.name;
                        group.appendChild(option);
                    });
                    select.appendChild(group);
                }
            } catch (error) {
                console.error('Ошибка загрузки пользовательских шаблонов:', error);
            }
        }

        async function loadSecretNames() {
            try {
                const items = await apiCall('GET', '/api/secrets');
                availableSecretsCache = Array.isArray(items) ? items : [];
                availableSecretNames = availableSecretsCache
                    .map((s) => (s && s.name ? String(s.name).trim() : ''))
                    .filter(Boolean);
            } catch (error) {
                console.error('Ошибка загрузки секретов:', error);
                availableSecretNames = [];
                availableSecretsCache = [];
            }
        }

        function extractSecretNamesFromValue(value) {
            const text = String(value || '');
            const names = [];
            const re = /\{\{\s*secret:([a-zA-Z0-9_.\-]+)\s*\}\}/g;
            let match;
            while ((match = re.exec(text)) !== null) {
                if (match[1]) names.push(match[1]);
            }
            return names;
        }

        function usernameFromSecretRefs(...values) {
            for (const value of values) {
                for (const secretName of extractSecretNamesFromValue(value)) {
                    const secret = availableSecretsCache.find((item) => String(item?.name || '') === secretName);
                    const username = String(secret?.username || '').trim();
                    if (username) return username;
                }
            }
            return '';
        }

        function applySecretUsernameToHost(host) {
            if (!host || String(host.ansible_user || '').trim()) return;
            const username = usernameFromSecretRefs(host.ansible_password, host.ansible_become_pass);
            if (username) host.ansible_user = username;
        }

        function maybeAutofillInventoryUsernameFromSecrets(inputEl) {
            if (!inputEl || inputEl.id !== 'group-host-ansible-password' && inputEl.id !== 'group-host-ansible-become-pass') {
                return;
            }
            const userInput = document.getElementById('group-host-ansible-user');
            if (!userInput || String(userInput.value || '').trim()) return;
            const username = usernameFromSecretRefs(
                document.getElementById('group-host-ansible-password')?.value,
                document.getElementById('group-host-ansible-become-pass')?.value
            );
            if (username) userInput.value = username;
        }

        async function loadSSHKeyNames() {
            try {
                const items = await apiCall('GET', '/api/ssh-keys');
                availableSSHKeyNames = (items || [])
                    .map((s) => (s && s.name ? String(s.name).trim() : ''))
                    .filter(Boolean);
            } catch (error) {
                console.error('Ошибка загрузки SSH-ключей:', error);
                availableSSHKeyNames = [];
            }
        }

        function openPlaybookBuilderModal(editName = null) {
            document.getElementById('playbook-builder-modal').classList.add('active');
            currentBuilderPlaybookName = editName;
            taskModules = [];
            handlerModules = [];
            preTaskModules = [];
            postTaskModules = [];
            updateTasksList();
            document.getElementById('builder-playbook-yaml-direct').value = '';

            const title = document.getElementById('playbook-builder-title');
            const yamlEditGroup = document.getElementById('builder-playbook-yaml-edit-group');
            if (editName) {
                title.textContent = `Редактировать плейбук: ${editName}`;
                yamlEditGroup.style.display = 'block';
                apiCall('GET', `/api/playbooks/${encodeURIComponent(editName)}`).then(data => {
                    document.getElementById('builder-playbook-name').value = data.name || editName;
                    document.getElementById('builder-playbook-description').value = data.description || '';
                    document.getElementById('builder-playbook-group-id').value = data.group_id || '';
                    renderResourceIconsOptions('builder-playbook-icon', data.icon || '');
                    document.getElementById('builder-playbook-yaml-direct').value = data.content || '';
                }).catch(error => {
                    alert('Ошибка загрузки плейбука: ' + error.message);
                });
            } else {
                title.textContent = 'Конструктор плейбука';
                yamlEditGroup.style.display = 'none';
                document.getElementById('builder-playbook-group-id').value = '';
                renderResourceIconsOptions('builder-playbook-icon');
            }

            if (Object.keys(availableModules).length === 0) {
                loadModules();
            }
            if (customPlaybookTemplates.length === 0) {
                loadCustomPlaybookTemplates();
            }
            // Показываем/скрываем become опции
            document.getElementById('builder-playbook-become').addEventListener('change', function() {
                document.getElementById('builder-become-options').style.display = this.checked ? 'block' : 'none';
            });
        }

        // Шаблоны пользователя
        function loadPlaybookTemplate() {
            const templateValue = document.getElementById('builder-playbook-template').value;
            if (!templateValue) return;
            if (!templateValue.startsWith('custom:')) return;
            const templateId = Number(templateValue.split(':')[1]);
            const tpl = customPlaybookTemplates.find(item => Number(item.id) === templateId)?.template_data;
            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 || 'all';
                document.getElementById('builder-playbook-connection').value = tpl.connection || '';
                document.getElementById('builder-playbook-gather-facts').checked = tpl.gather_facts !== false;
                document.getElementById('builder-playbook-become').checked = tpl.become || false;
                document.getElementById('builder-become-options').style.display = tpl.become ? 'block' : 'none';
                document.getElementById('builder-playbook-become-user').value = tpl.become_user || '';
                document.getElementById('builder-playbook-become-method').value = tpl.become_method || '';
                document.getElementById('builder-playbook-strategy').value = tpl.strategy || '';
                document.getElementById('builder-playbook-forks').value = tpl.forks || '';
                document.getElementById('builder-playbook-tags').value = Array.isArray(tpl.tags) ? tpl.tags.join(', ') : '';
                document.getElementById('builder-playbook-limit').value = tpl.limit || '';
                document.getElementById('builder-playbook-ignore-errors').checked = Boolean(tpl.ignore_errors);
                document.getElementById('builder-playbook-any-errors-fatal').checked = Boolean(tpl.any_errors_fatal);
                if (tpl.vars && typeof tpl.vars === 'object') {
                    document.getElementById('builder-playbook-vars').value = Object.entries(tpl.vars)
                        .map(([k, v]) => `${k}: ${v}`)
                        .join('\n');
                } else {
                    document.getElementById('builder-playbook-vars').value = '';
                }
                
                // Очищаем текущие задачи
                taskModules = [];
                document.getElementById('builder-tasks-list').innerHTML = '';
                
                // Добавляем задачи из шаблона
                const templateTasks = Array.isArray(tpl.task_modules)
                    ? tpl.task_modules
                    : (Array.isArray(tpl.tasks) ? tpl.tasks : []);
                templateTasks.forEach((tm) => addTaskModule(tm));
                updateTasksList();
                document.getElementById('builder-playbook-yaml-direct').value = '';
                if (typeof updateTaskFields === 'function') {
                    document.getElementById('builder-become-options').style.display = document.getElementById('builder-playbook-become').checked ? 'block' : 'none';
                }
            }
        }

        function closePlaybookBuilderModal() {
            document.getElementById('playbook-builder-modal').classList.remove('active');
            document.getElementById('playbook-builder-form').reset();
            taskModules = [];
            updateTasksList();
            currentBuilderPlaybookName = null;
            document.getElementById('builder-playbook-yaml-direct').value = '';
            document.getElementById('builder-playbook-yaml-edit-group').style.display = 'none';
            document.getElementById('playbook-builder-title').textContent = 'Конструктор плейбука';
        }

        function addTaskModule(prefill = null) {
            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);

            if (prefill && prefill.module) {
                moduleSelect.value = prefill.module;
                taskModules[taskId].module = prefill.module;
                taskModules[taskId].params = {};
                updateTaskFields(taskDiv, taskId);
                applyModuleParamsToTaskFields(taskDiv, taskId, taskModules, prefill.params || {});
            }
        }


        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/preview', config);
                alert('Предпросмотр плейбука:\n\n' + result.content.substring(0, 1000) + (result.content.length > 1000 ? '\n...' : ''));
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        }

        async function saveBuilderAsTemplate() {
            const config = getPlaybookBuilderConfig();
            const templateName = (config.name || '').trim();
            if (!templateName) {
                alert('Укажите название плейбука перед сохранением шаблона');
                return;
            }

            const category = ((await awmPrompt('Категория шаблона:', 'general')) || 'general').trim() || 'general';
            const description = ((await awmPrompt('Описание шаблона:', config.description || '')) || '').trim();

            try {
                await apiCall('POST', '/api/playbook-templates', {
                    name: templateName,
                    category,
                    description,
                    template_data: config
                });
                alert('Шаблон успешно сохранён');
            } catch (error) {
                alert('Ошибка при сохранении шаблона: ' + error.message);
            }
        }

        function getPlaybookBuilderConfig() {
            const groupIdRaw = document.getElementById('builder-playbook-group-id').value;
            const config = {
                name: document.getElementById('builder-playbook-name').value,
                description: document.getElementById('builder-playbook-description').value,
                group_id: groupIdRaw ? Number(groupIdRaw) : null,
                icon: document.getElementById('builder-playbook-icon').value || null,
                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.dataset.fieldName = field.name;
                input.dataset.fieldType = field.type || 'text';
                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);
            });
        }

        function applyModuleParamsToTaskFields(taskDiv, taskId, modulesArray, params) {
            if (!params || typeof params !== 'object') return;
            const fieldsContainer = taskDiv.querySelector('.task-fields');
            if (!fieldsContainer) return;
            Object.entries(params).forEach(([key, rawValue]) => {
                const selector = `[data-field-name="${CSS.escape(String(key))}"]`;
                const el = fieldsContainer.querySelector(selector);
                if (!el) {
                    modulesArray[taskId].params[key] = rawValue;
                    return;
                }
                const fieldType = el.dataset.fieldType || el.type || 'text';
                if (fieldType === 'checkbox') {
                    el.checked = Boolean(rawValue);
                    modulesArray[taskId].params[key] = Boolean(rawValue);
                } else {
                    el.value = String(rawValue ?? '');
                    if (String(rawValue ?? '').trim() !== '') {
                        modulesArray[taskId].params[key] = rawValue;
                    }
                }
                el.dispatchEvent(new Event('input', { bubbles: true }));
                el.dispatchEvent(new Event('change', { bubbles: true }));
            });
        }

        document.getElementById('playbook-builder-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            try {
                if (currentBuilderPlaybookName) {
                    const yamlDirect = document.getElementById('builder-playbook-yaml-direct').value.trim();
                    const groupIdRaw = document.getElementById('builder-playbook-group-id').value;
                    const groupId = groupIdRaw ? Number(groupIdRaw) : null;
                    if (yamlDirect) {
                        await apiCall('PUT', `/api/playbooks/${encodeURIComponent(currentBuilderPlaybookName)}`, {
                            content: yamlDirect,
                            description: document.getElementById('builder-playbook-description').value || '',
                            group_id: groupId,
                            icon: document.getElementById('builder-playbook-icon').value || null
                        });
                    } else {
                        const config = getPlaybookBuilderConfig();
                        const preview = await apiCall('POST', '/api/builders/playbook/preview', config);
                        await apiCall('PUT', `/api/playbooks/${encodeURIComponent(currentBuilderPlaybookName)}`, {
                            content: preview.content,
                            description: config.description || '',
                            group_id: config.group_id ?? null,
                            icon: config.icon ?? null
                        });
                    }
                } else {
                    const config = getPlaybookBuilderConfig();
                    await apiCall('POST', '/api/builders/playbook', config);
                }
                closePlaybookBuilderModal();
                loadPlaybooks();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

        // Конструктор инвентори
        async function openInventoryBuilderModal(editName = null) {
            await loadSecretNames();
            await loadSSHKeyNames();
            const loadToken = ++inventoryBuilderLoadToken;
            document.getElementById('inventory-builder-modal').classList.add('active');
            currentBuilderInventoryName = editName;
            inventoryGroups = [];
            updateGroupsList();
            const yamlDirectEl = document.getElementById('builder-inventory-yaml-direct');
            /* При редактировании не очищаем поле до прихода ответа: иначе мигание и перезапись ввода устаревшим GET */
            if (!editName) {
                yamlDirectEl.value = '';
            }

            const title = document.getElementById('inventory-builder-title');
            const yamlEditGroup = document.getElementById('builder-inventory-yaml-edit-group');
            if (editName) {
                title.textContent = `Редактировать инвентори: ${editName}`;
                yamlEditGroup.style.display = 'block';
                try {
                    const data = await apiCall('GET', `/api/inventories/${encodeURIComponent(editName)}`);
                    if (loadToken !== inventoryBuilderLoadToken) return;
                    if (currentBuilderInventoryName !== editName) return;
                    document.getElementById('builder-inventory-name').value = data.name || editName;
                    document.getElementById('builder-inventory-description').value = data.description || '';
                    document.getElementById('builder-inventory-group-id').value = data.group_id || '';
                    document.getElementById('builder-inventory-type').value = data.type || 'ini';
                    renderResourceIconsOptions('builder-inventory-icon', data.icon || '');
                    yamlDirectEl.value = data.content || '';
                } catch (error) {
                    if (loadToken !== inventoryBuilderLoadToken) return;
                    if (currentBuilderInventoryName !== editName) return;
                    alert('Ошибка загрузки инвентори: ' + error.message);
                }
            } else {
                title.textContent = 'Конструктор инвентори';
                yamlEditGroup.style.display = 'none';
                document.getElementById('builder-inventory-group-id').value = '';
                renderResourceIconsOptions('builder-inventory-icon');
            }
        }

        function closeInventoryBuilderModal() {
            document.getElementById('inventory-builder-modal').classList.remove('active');
            document.getElementById('inventory-builder-form').reset();
            inventoryGroups = [];
            updateGroupsList();
            currentBuilderInventoryName = null;
            document.getElementById('builder-inventory-yaml-direct').value = '';
            document.getElementById('builder-inventory-yaml-edit-group').style.display = 'none';
            document.getElementById('inventory-builder-title').textContent = 'Конструктор инвентори';
        }

        function addGroup() {
            const groupId = inventoryGroups.length;
            inventoryGroups.push({ name: `group${groupId + 1}`, hosts: [], vars: {}, auth: {}, hostEditorMode: 'interactive' });
            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.className = 'inventory-group-card';
                
                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 class="inventory-mode-switch">
                        <label style="margin:0; font-weight:600;">Режим ввода хостов:</label>
                        <div style="display:flex; gap:8px;">
                            <button type="button" class="btn btn-sm ${group.hostEditorMode === 'manual' ? 'btn-primary' : 'btn-secondary'}" onclick="setGroupHostEditorMode(${index}, 'manual')">Вручную</button>
                            <button type="button" class="btn btn-sm ${group.hostEditorMode !== 'manual' ? 'btn-primary' : 'btn-secondary'}" onclick="setGroupHostEditorMode(${index}, 'interactive')">Интерактивно</button>
                        </div>
                    </div>
                    <div id="group-hosts-manual-${index}" style="display:${group.hostEditorMode === 'manual' ? 'block' : 'none'};">
                        <div class="inventory-manual-wrap">
                            <div class="inventory-manual-title">Хосты (по одному на строку)</div>
                            <textarea class="inventory-manual-textarea" id="group-hosts-text-${index}" placeholder="web1 ansible_host=192.168.1.10 ansible_user=admin ansible_password={% raw %}{{secret:prod_ssh}}{% endraw %}&#10;web2 ansible_host=192.168.1.11 ansible_user=root ansible_become_pass={% raw %}{{secret:prod_sudo}}{% endraw %}"
                                  onchange="updateGroupHosts(${index}, this.value)"></textarea>
                            <div class="inventory-manual-help">
                                Формат строки: <code>hostname ansible_host=IP ansible_user=USER ansible_password={% raw %}{{secret:NAME}}{% endraw %}</code>.
                                Поддерживаются параметры: <code>ansible_host</code>, <code>ansible_user</code>, <code>ansible_password</code>, <code>ansible_become_pass</code>, <code>ansible_port</code>, <code>ansible_ssh_private_key_file</code>, <code>ansible_python_interpreter</code>, <code>ansible_connection</code>, <code>ansible_ssh_common_args</code> и любые дополнительные <code>key=value</code>.
                                Для значений с пробелами используйте кавычки, например:
                                <code>ansible_ssh_common_args='-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null'</code>.
                                <br>Для подстановки используйте токены: <code>{% raw %}{{secret:NAME}}{% endraw %}</code>, <code>{% raw %}{{var:NAME}}{% endraw %}</code>, <code>{% raw %}{{sshkey:NAME}}{% endraw %}</code>.
                            </div>
                        </div>
                    </div>
                    <div id="group-hosts-interactive-${index}" style="display:${group.hostEditorMode === 'manual' ? 'none' : 'block'};">
                        <label style="display:block; margin-bottom:6px;">Хосты группы (интерактивный режим)</label>
                        <div class="awm-host-table-wrap">
                            <table class="awm-host-table">
                                <thead>
                                    <tr>
                                        <th class="col-host">Хост</th>
                                        <th class="col-ip">IP / DNS</th>
                                        <th class="col-user">Пользователь</th>
                                        <th class="col-conn">Подключение</th>
                                        <th class="col-sshargs">Аргументы SSH</th>
                                        <th class="col-extra">Доп. переменные</th>
                                        <th class="col-actions">Действия</th>
                                    </tr>
                                </thead>
                                <tbody id="group-hosts-rows-${index}"></tbody>
                            </table>
                        </div>
                        <datalist id="group-secret-hints-${index}">
                            ${renderSecretDatalistOptions()}
                        </datalist>
                        <datalist id="group-connection-hints-${index}">
                            <option value="ssh"></option>
                            <option value="paramiko"></option>
                            <option value="local"></option>
                            <option value="docker"></option>
                        </datalist>
                        <datalist id="group-sshkey-hints-${index}">
                            ${renderSSHKeyDatalistOptions()}
                        </datalist>
                        <div style="margin-top:8px;">
                            <button type="button" class="btn btn-sm btn-secondary" onclick="addGroupHostRow(${index})">+ Добавить хост</button>
                        </div>
                    </div>
                    <div style="margin-top: 10px;">
                        <label>Python interpreter для группы (необязательно)</label>
                        <input type="text" class="form-control" placeholder="/usr/bin/python3" value="${(group.vars && group.vars.ansible_python_interpreter) || ''}"
                               onchange="setGroupPythonInterpreter(${index}, this.value)" style="max-width: 300px;">
                    </div>
                    <div style="margin-top: 10px;">
                        <label style="display: flex; align-items: center;">
                            <input type="checkbox" id="group-paramiko-check-${index}" onchange="toggleGroupParamiko(${index}, this.checked)" style="margin-right: 5px;">
                            Использовать ansible_connection=paramiko (если sshpass недоступен)
                        </label>
                        <small style="color: #718096; font-size: 12px;">
                            Требуется установленный python-модуль <code>paramiko</code> на сервере AWM.
                        </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) ${inventoryTokenHint('Можно указывать обычное значение или токен переменной: {% raw %}{{var:NAME}}{% endraw %}.')}</label>
                                    <input type="text" class="form-control" placeholder="admin" 
                                           onchange="setGroupAuth(${index}, 'ansible_user', this.value)">
                                </div>
                                <div class="form-group">
                                    <label>Пароль (ansible_password) ${inventoryTokenHint('Можно использовать токен секрета: {% raw %}{{secret:NAME}}{% endraw %}.')}</label>
                                    <input type="text" class="form-control" placeholder="{% raw %}{{secret:name}}{% endraw %}" list="group-secret-hints-${index}" data-auth-pass="password"
                                           onchange="setGroupAuth(${index}, 'ansible_password', this.value)">
                                </div>
                                <div class="form-group">
                                    <label>Пароль sudo (ansible_become_pass) ${inventoryTokenHint('Можно использовать токен секрета: {% raw %}{{secret:NAME}}{% endraw %}.')}</label>
                                    <input type="text" class="form-control" placeholder="{% raw %}{{secret:name}}{% endraw %}" list="group-secret-hints-${index}" data-auth-pass="become"
                                           onchange="setGroupAuth(${index}, 'ansible_become_pass', 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 passInputs = groupDiv.querySelectorAll(`#group-auth-${index} input[data-auth-pass]`);
                        if (userInput && group.auth.ansible_user) userInput.value = group.auth.ansible_user;
                        if (passInputs && passInputs[0] && group.auth.ansible_password) passInputs[0].value = group.auth.ansible_password;
                        if (passInputs && passInputs[1] && group.auth.ansible_become_pass) passInputs[1].value = group.auth.ansible_become_pass;
                    }
                }

                if (group.auth && group.auth.ansible_connection === 'paramiko') {
                    const paramikoCheckbox = groupDiv.querySelector(`#group-paramiko-check-${index}`);
                    if (paramikoCheckbox) {
                        paramikoCheckbox.checked = true;
                    }
                }

                const manualText = groupDiv.querySelector(`#group-hosts-text-${index}`);
                if (manualText) {
                    manualText.value = buildGroupHostsText(index);
                }
                
                container.appendChild(groupDiv);
                renderGroupHostsRows(index);
            });
        }

        function setGroupHostEditorMode(index, mode) {
            inventoryGroups[index].hostEditorMode = mode === 'manual' ? 'manual' : 'interactive';
            if (inventoryGroups[index].hostEditorMode === 'manual') {
                syncGroupHostsFromInteractive(index);
            }
            updateGroupsList();
        }

        function buildGroupHostsText(index) {
            const group = inventoryGroups[index];
            if (!group || !Array.isArray(group.hosts)) return '';
            return group.hosts.map(hostToInventoryLine).filter(Boolean).join('\n');
        }

        function hostToInventoryLine(host) {
            if (!host || !host.name) return '';
            const chunks = [host.name];
            const keys = [
                'ansible_host',
                'ansible_connection',
                'ansible_user',
                'ansible_password',
                'ansible_become_pass',
                'ansible_port',
                'ansible_ssh_private_key_file',
                'ansible_ssh_common_args',
                'ansible_python_interpreter',
            ];
            keys.forEach((k) => {
                if (host[k]) {
                    chunks.push(`${k}=${formatInventoryVarValue(host[k])}`);
                }
            });
            if (host.extra_vars && typeof host.extra_vars === 'object') {
                Object.keys(host.extra_vars).sort().forEach((k) => {
                    const val = host.extra_vars[k];
                    if (k && val !== undefined && val !== null && String(val).trim() !== '') {
                        chunks.push(`${k}=${formatInventoryVarValue(val)}`);
                    }
                });
            }
            return chunks.join(' ');
        }

        function formatInventoryVarValue(value) {
            const str = String(value ?? '').trim();
            if (!str) return '';
            if (/\s|,/.test(str)) {
                return `'${str.replace(/'/g, "\\'")}'`;
            }
            return str;
        }

        function inventoryTokenHint(title) {
            return `<span class="inventory-token-hint" title="${escapeHtml(title)}">?</span>`;
        }

        function renderGroupHostsRows(index) {
            const body = document.getElementById(`group-hosts-rows-${index}`);
            if (!body) return;
            const group = inventoryGroups[index];
            const hosts = Array.isArray(group.hosts) ? group.hosts : [];
            if (!hosts.length) {
                body.innerHTML = '<tr><td colspan="7" style="padding:8px; border:1px solid #e2e8f0; color:#64748b;">Хосты не добавлены</td></tr>';
                return;
            }
            body.innerHTML = hosts.map((h, hostIndex) => `
                <tr>
                    <td><div class="awm-host-summary" title="${escapeHtml(h.name || '')}">${escapeHtml(h.name || '-')}</div></td>
                    <td><div class="awm-host-summary" title="${escapeHtml(h.ansible_host || '')}">${escapeHtml(h.ansible_host || '-')}</div></td>
                    <td><div class="awm-host-summary" title="${escapeHtml(h.ansible_user || '')}">${escapeHtml(h.ansible_user || '-')}</div></td>
                    <td><div class="awm-host-summary" title="${escapeHtml(h.ansible_connection || '')}">${escapeHtml(h.ansible_connection || '-')}</div></td>
                    <td><div class="awm-host-summary" title="${escapeHtml(h.ansible_ssh_common_args || '')}">${escapeHtml(h.ansible_ssh_common_args || '-')}</div></td>
                    <td><div class="awm-host-summary" title="${escapeHtml(extraVarsToText(h.extra_vars))}">${escapeHtml(extraVarsToText(h.extra_vars) || '-')}</div></td>
                    <td class="awm-host-actions">
                        <button type="button" class="btn btn-info btn-sm" onclick="copyGroupHostRow(${index}, ${hostIndex})">Копировать</button>
                        <button type="button" class="btn btn-secondary btn-sm" onclick="openGroupHostModal(${index}, ${hostIndex})">Изменить</button>
                        <button type="button" class="btn btn-danger btn-sm" onclick="removeGroupHostRow(${index}, ${hostIndex})">Удалить</button>
                    </td>
                </tr>
            `).join('');
        }

        function extraVarsToText(extraVars) {
            if (!extraVars || typeof extraVars !== 'object') return '';
            return Object.entries(extraVars).map(([k, v]) => `${k}=${String(v)}`).join(' ');
        }

        function renderSecretDatalistOptions() {
            if (!Array.isArray(availableSecretNames) || availableSecretNames.length === 0) {
                return '<option value="{% raw %}{{secret:your_secret_name}}{% endraw %}"></option>';
            }
            return availableSecretNames
                .map((name) => `<option value="{% raw %}{{secret:${escapeHtml(name)}}}{% endraw %}"></option>`)
                .join('');
        }

        function renderSSHKeyDatalistOptions() {
            if (!Array.isArray(availableSSHKeyNames) || availableSSHKeyNames.length === 0) {
                return '<option value="{% raw %}{{sshkey:your_key_name}}{% endraw %}"></option>';
            }
            return availableSSHKeyNames
                .map((name) => `<option value="{% raw %}{{sshkey:${escapeHtml(name)}}}{% endraw %}"></option>`)
                .join('');
        }

        function addGroupHostRow(index) {
            openGroupHostModal(index, null);
        }

        function removeGroupHostRow(index, hostIndex) {
            inventoryGroups[index].hosts.splice(hostIndex, 1);
            renderGroupHostsRows(index);
            syncGroupManualText(index);
        }

        function openGroupHostModal(groupIndex, hostIndex = null) {
            const group = inventoryGroups[groupIndex];
            if (!group) return;
            group.hosts = group.hosts || [];
            const source = (hostIndex !== null && group.hosts[hostIndex]) ? group.hosts[hostIndex] : {};
            currentGroupHostEditState = { groupIndex, hostIndex };

            document.getElementById('group-host-modal-title').textContent = hostIndex === null ? 'Добавить хост' : 'Редактировать хост';
            document.getElementById('group-host-name').value = source.name || '';
            document.getElementById('group-host-ansible-host').value = source.ansible_host || '';
            document.getElementById('group-host-ansible-user').value = source.ansible_user || '';
            document.getElementById('group-host-ansible-password').value = source.ansible_password || '';
            document.getElementById('group-host-ansible-become-pass').value = source.ansible_become_pass || '';
            document.getElementById('group-host-ansible-port').value = source.ansible_port || '';
            document.getElementById('group-host-ansible-ssh-key').value = source.ansible_ssh_private_key_file || '';
            document.getElementById('group-host-ansible-connection').value = source.ansible_connection || '';
            document.getElementById('group-host-ansible-ssh-common-args').value = source.ansible_ssh_common_args || '';
            document.getElementById('group-host-extra-vars').value = extraVarsToText(source.extra_vars);

            document.getElementById('group-host-secret-hints').innerHTML = renderSecretDatalistOptions();
            document.getElementById('group-host-sshkey-hints').innerHTML = renderSSHKeyDatalistOptions();
            document.getElementById('group-host-modal').classList.add('active');
        }

        function copyGroupHostRow(groupIndex, hostIndex) {
            const group = inventoryGroups[groupIndex];
            if (!group || !Array.isArray(group.hosts) || !group.hosts[hostIndex]) return;
            const source = group.hosts[hostIndex];
            currentGroupHostEditState = { groupIndex, hostIndex: null };

            document.getElementById('group-host-modal-title').textContent = 'Копировать хост';
            document.getElementById('group-host-name').value = source.name ? `${source.name}-copy` : '';
            document.getElementById('group-host-ansible-host').value = source.ansible_host || '';
            document.getElementById('group-host-ansible-user').value = source.ansible_user || '';
            document.getElementById('group-host-ansible-password').value = source.ansible_password || '';
            document.getElementById('group-host-ansible-become-pass').value = source.ansible_become_pass || '';
            document.getElementById('group-host-ansible-port').value = source.ansible_port || '';
            document.getElementById('group-host-ansible-ssh-key').value = source.ansible_ssh_private_key_file || '';
            document.getElementById('group-host-ansible-connection').value = source.ansible_connection || '';
            document.getElementById('group-host-ansible-ssh-common-args').value = source.ansible_ssh_common_args || '';
            document.getElementById('group-host-extra-vars').value = extraVarsToText(source.extra_vars);

            document.getElementById('group-host-secret-hints').innerHTML = renderSecretDatalistOptions();
            document.getElementById('group-host-sshkey-hints').innerHTML = renderSSHKeyDatalistOptions();
            document.getElementById('group-host-modal').classList.add('active');
        }

        function closeGroupHostModal() {
            document.getElementById('group-host-modal').classList.remove('active');
            const form = document.getElementById('group-host-form');
            if (form) form.reset();
            currentGroupHostEditState = null;
        }

        function saveGroupHostFromModal(event) {
            event.preventDefault();
            if (!currentGroupHostEditState) return;
            const { groupIndex, hostIndex } = currentGroupHostEditState;
            const group = inventoryGroups[groupIndex];
            if (!group) return;
            group.hosts = group.hosts || [];

            const host = {};
            const setField = (key, value) => {
                const clean = (value || '').trim();
                if (clean) host[key] = clean;
            };

            setField('name', document.getElementById('group-host-name').value);
            if (!host.name) {
                alert('Поле "Хост" обязательно');
                return;
            }
            setField('ansible_host', document.getElementById('group-host-ansible-host').value);
            setField('ansible_user', document.getElementById('group-host-ansible-user').value);
            setField('ansible_password', document.getElementById('group-host-ansible-password').value);
            setField('ansible_become_pass', document.getElementById('group-host-ansible-become-pass').value);
            setField('ansible_port', document.getElementById('group-host-ansible-port').value);
            setField('ansible_ssh_private_key_file', document.getElementById('group-host-ansible-ssh-key').value);
            setField('ansible_connection', document.getElementById('group-host-ansible-connection').value);
            setField('ansible_ssh_common_args', document.getElementById('group-host-ansible-ssh-common-args').value);
            applySecretUsernameToHost(host);

            const extraPairs = parseInventoryParams(document.getElementById('group-host-extra-vars').value || '');
            const extraVars = {};
            extraPairs.forEach(({ key, value }) => {
                if (key) extraVars[key] = value;
            });
            if (Object.keys(extraVars).length) {
                host.extra_vars = extraVars;
            }

            if (hostIndex === null || hostIndex === undefined) {
                group.hosts.push(host);
            } else {
                group.hosts[hostIndex] = host;
            }
            renderGroupHostsRows(groupIndex);
            syncGroupManualText(groupIndex);
            closeGroupHostModal();
        }

        function syncGroupManualText(index) {
            const textarea = document.getElementById(`group-hosts-text-${index}`);
            if (textarea) {
                textarea.value = buildGroupHostsText(index);
            }
        }

        function syncGroupHostsFromInteractive(index) {
            if (!inventoryGroups[index].hosts) {
                inventoryGroups[index].hosts = [];
            }
            inventoryGroups[index].hosts = inventoryGroups[index].hosts.filter((h) => (h.name || '').trim());
            syncGroupManualText(index);
        }

        function escapeHtml(value) {
            return String(value || '').replace(/[&<>"']/g, (s) => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[s]));
        }

        function updateGroupHosts(index, text) {
            const hosts = [];
            text.split('\n').forEach(line => {
                line = line.trim();
                if (line) {
                    const match = line.match(/^(\S+)(?:\s+(.*))?$/);
                    if (!match) return;
                    const host = { name: match[1] };
                    const paramsText = (match[2] || '').trim();
                    const knownKeys = new Set([
                        'ansible_host',
                        'ansible_user',
                        'ansible_password',
                        'ansible_become_pass',
                        'ansible_port',
                        'ansible_ssh_private_key_file',
                        'ansible_python_interpreter',
                        'ansible_connection',
                        'ansible_ssh_common_args',
                    ]);
                    const parsedParams = parseInventoryParams(paramsText);
                    const extraVars = {};
                    parsedParams.forEach(({ key, value }) => {
                        if (!key) return;
                        if (knownKeys.has(key)) {
                            host[key] = value;
                        } else {
                            extraVars[key] = value;
                        }
                    });
                    if (Object.keys(extraVars).length) {
                        host.extra_vars = extraVars;
                    }
                    applySecretUsernameToHost(host);
                    // Применяем общие настройки группы если они есть
                    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;
                        }
                        if (inventoryGroups[index].auth.ansible_become_pass && !host.ansible_become_pass) {
                            host.ansible_become_pass = inventoryGroups[index].auth.ansible_become_pass;
                        }
                        if (inventoryGroups[index].auth.ansible_connection && !host.ansible_connection) {
                            host.ansible_connection = inventoryGroups[index].auth.ansible_connection;
                        }
                    }
                    hosts.push(host);
                }
            });
            inventoryGroups[index].hosts = hosts;
            renderGroupHostsRows(index);
        }

        function parseInventoryParams(text) {
            const result = [];
            if (!text) return result;
            const regex = /([A-Za-z0-9_.:-]+)=('(?:\\'|[^'])*'|"(?:\\"|[^"])*"|[^\s]+)/g;
            let match;
            while ((match = regex.exec(text)) !== null) {
                const key = (match[1] || '').trim();
                let value = (match[2] || '').trim();
                if (
                    (value.startsWith("'") && value.endsWith("'")) ||
                    (value.startsWith('"') && value.endsWith('"'))
                ) {
                    value = value.slice(1, -1);
                }
                value = value.replace(/\\'/g, "'").replace(/\\"/g, '"');
                if (key && value !== '') {
                    result.push({ key, value });
                }
            }
            return result;
        }

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

        function toggleGroupParamiko(index, enabled) {
            if (enabled) {
                setGroupAuth(index, 'ansible_connection', 'paramiko');
            } else {
                setGroupAuth(index, 'ansible_connection', '');
            }
        }

        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];
            }
        }

        function setGroupPythonInterpreter(index, value) {
            if (!inventoryGroups[index].vars) {
                inventoryGroups[index].vars = {};
            }
            const v = (value || '').trim();
            if (v) {
                inventoryGroups[index].vars.ansible_python_interpreter = v;
            } else {
                delete inventoryGroups[index].vars.ansible_python_interpreter;
                if (Object.keys(inventoryGroups[index].vars).length === 0) {
                    inventoryGroups[index].vars = {};
                }
            }
        }

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

        function getInventoryBuilderConfig() {
            // Применяем общие настройки аутентификации к хостам
            inventoryGroups.forEach((group) => {
                (group.hosts || []).forEach((host) => applySecretUsernameToHost(host));
            });
            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;
                        }
                        if (group.auth.ansible_become_pass && !host.ansible_become_pass) {
                            host.ansible_become_pass = group.auth.ansible_become_pass;
                        }
                        if (group.auth.ansible_connection && !host.ansible_connection) {
                            host.ansible_connection = group.auth.ansible_connection;
                        }
                    });
                }
            });
            
            const globalPython = document.getElementById('builder-inventory-python-interpreter').value.trim();
            const groupIdRaw = document.getElementById('builder-inventory-group-id').value;
            const payload = {
                name: document.getElementById('builder-inventory-name').value,
                description: document.getElementById('builder-inventory-description').value,
                group_id: groupIdRaw ? Number(groupIdRaw) : null,
                icon: document.getElementById('builder-inventory-icon').value || null,
                type: document.getElementById('builder-inventory-type').value,
                groups: inventoryGroups
            };
            if (globalPython) {
                payload.ansible_python_interpreter = globalPython;
            }
            return payload;
        }

        document.getElementById('inventory-builder-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            try {
                if (currentBuilderInventoryName) {
                    const rawContent = document.getElementById('builder-inventory-yaml-direct').value.trim();
                    const type = document.getElementById('builder-inventory-type').value || 'ini';
                    const description = document.getElementById('builder-inventory-description').value || '';
                    const groupIdRaw = document.getElementById('builder-inventory-group-id').value;
                    const groupId = groupIdRaw ? Number(groupIdRaw) : null;
                    if (rawContent) {
                        await apiCall('PUT', `/api/inventories/${encodeURIComponent(currentBuilderInventoryName)}`, {
                            content: rawContent,
                            inventory_type: type,
                            description,
                            group_id: groupId,
                            icon: document.getElementById('builder-inventory-icon').value || null
                        });
                    } else {
                        const config = getInventoryBuilderConfig();
                        const preview = await apiCall('POST', '/api/builders/inventory/preview', config);
                        await apiCall('PUT', `/api/inventories/${encodeURIComponent(currentBuilderInventoryName)}`, {
                            content: preview.content,
                            inventory_type: type,
                            description,
                            group_id: config.group_id ?? null,
                            icon: config.icon ?? null
                        });
                    }
                } else {
                    const config = getInventoryBuilderConfig();
                    await apiCall('POST', '/api/builders/inventory', config);
                }
                closeInventoryBuilderModal();
                loadInventories();
            } catch (error) {
                alert('Ошибка: ' + error.message);
            }
        });

        document.getElementById('group-host-form').addEventListener('submit', saveGroupHostFromModal);

        // Инициализация - загружаем только если страница полностью загружена
        function applyRunFromNotificationUrl() {
            const runId = new URLSearchParams(window.location.search).get('run');
            if (!runId) return;
            switchTab('runs');
            window.setTimeout(() => {
                if (typeof viewRunLog === 'function') {
                    viewRunLog(runId);
                }
            }, 350);
        }

        function bindListSearch(inputId, pagerState, reloadFn) {
            const input = document.getElementById(inputId);
            if (!input) return;
            let timer = null;
            input.addEventListener('input', () => {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    pagerState.q = (input.value || '').trim();
                    reloadFn(true);
                }, 350);
            });
        }

        function initializeApp() {
            applyRunFromNotificationUrl();
            bindListSearch('playbooks-search', playbooksPager, loadPlaybooks);
            bindListSearch('inventories-search', inventoriesPager, loadInventories);
            bindListSearch('runs-search', runsPager, loadRuns);
            // Загружаем только если активна вкладка плейбуков
            const playbooksTab = document.getElementById('playbooks-tab');
            if (playbooksTab && playbooksTab.classList.contains('active')) {
                loadPlaybooks(true);
            }
            renderResourceIconsOptions('playbook-icon');
            renderResourceIconsOptions('inventory-icon');
            renderResourceIconsOptions('builder-playbook-icon');
            renderResourceIconsOptions('builder-inventory-icon');
            loadUserGroupsForAccess();
            loadModules();
            loadCustomPlaybookTemplates();
            loadInlineTemplates();
            updateStats();
            loadPlaybookSchedules();
        }
        
        // Проверяем готовность 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(false);
                loadPlaybookSchedules();
            }
        }, 5000);
    </script>
{% endblock %}