{% extends "base.html" %}

{% block title %}Шаблоны плейбуков - AWM{% endblock %}

{% block content %}
<div class="card">
    <div class="toolbar">
        <h2>Пользовательские шаблоны плейбуков</h2>
        <div style="display:flex; gap:8px; flex-wrap:wrap;">
            <button class="btn btn-info" onclick="openLibraryModal()">Библиотека шаблонов</button>
            <button class="btn btn-success" onclick="openTemplateModal()">Создать шаблон</button>
        </div>
    </div>
    <div class="admin-subtitle">Интерактивный конструктор шаблонов: выбирайте модули, заполняйте поля и сохраняйте готовые заготовки для запуска.</div>
    <div id="templates-list"><div class="loading">Загрузка...</div></div>
</div>

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

<div id="template-modal" class="modal">
    <div class="modal-content" style="max-width: 980px;">
        <div class="modal-header">
            <h3 id="template-modal-title">Создание шаблона</h3>
            <button class="close-btn" onclick="closeTemplateModal()">&times;</button>
        </div>
        <form id="template-form">
            <input type="hidden" id="template-id">
            <div class="form-row">
                <div class="form-group">
                    <label>Название</label>
                    <input type="text" id="template-name" required>
                </div>
                <div class="form-group">
                    <label>Категория</label>
                    <input type="text" id="template-category" placeholder="general" value="general">
                </div>
            </div>
            <div class="form-group">
                <label>Описание</label>
                <input type="text" id="template-description">
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Хосты</label>
                    <input type="text" id="tpl-hosts" value="all" placeholder="all, webservers">
                </div>
                <div class="form-group">
                    <label>Подключение</label>
                    <select id="tpl-connection">
                        <option value="">По умолчанию</option>
                        <option value="ssh">ssh</option>
                        <option value="local">local</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label><input type="checkbox" id="tpl-gather-facts" checked> Собирать факты</label>
                </div>
                <div class="form-group">
                    <label><input type="checkbox" id="tpl-become"> Использовать sudo</label>
                </div>
            </div>

            <div class="form-group">
                <label>Переменные (YAML, опционально)</label>
                <textarea id="tpl-vars" rows="4" placeholder="env: prod&#10;retries: 3"></textarea>
            </div>

            <div class="form-group">
                <div class="toolbar" style="margin-bottom: 8px;">
                    <label style="margin:0;">Задачи шаблона</label>
                    <button type="button" class="btn btn-secondary btn-sm" onclick="addTemplateTask()">Добавить задачу</button>
                </div>
                <div id="tpl-tasks-list"></div>
            </div>

            <div class="form-group">
                <label>JSON предпросмотр результата</label>
                <textarea id="template-data-preview" rows="12" readonly style="font-family: monospace; background: #f8fafc;"></textarea>
            </div>

            <div style="display:flex; gap:10px; justify-content:flex-end;">
                <button type="button" class="btn btn-secondary" onclick="closeTemplateModal()">Отмена</button>
                <button type="submit" class="btn btn-primary">Сохранить</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    let templatesCache = [];
    let availableModules = {};
    let templateTasks = [];
    const DEVOPS_LIBRARY = [
        {
            name: "Nginx + UFW базовый деплой",
            category: "devops/web",
            description: "Установка Nginx, включение сервиса и открытие порта 80 в UFW.",
            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: "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: "Node Exporter deploy (binary)",
            category: "devops/monitoring",
            description: "Создание пользователя exporter и копирование systemd unit.",
            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: "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: "Users baseline (SRE)",
            category: "devops/security",
            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: "Zabbix agent install (Debian)",
            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: "Zabbix sender install",
            category: "devops/monitoring",
            description: "Установить zabbix-sender для отправки trapper-метрик.",
            template_data: {
                name: "install-zabbix-sender",
                hosts: "monitoring_targets",
                gather_facts: true,
                become: true,
                task_modules: [
                    { name: "Install zabbix-sender", module: "apt", params: { package_name: "zabbix-sender", package_state: "present", update_cache: true } },
                    { name: "Sender version check", module: "command", params: { command: "zabbix_sender --version" } }
                ]
            }
        },
        {
            name: "Создать пользователя с sudo",
            category: "devops/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: "devops/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: "Пакеты baseline (common tools)",
            category: "devops/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: "devops/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: "devops/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: "Создать структуру директорий приложения",
            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: "Systemd reload + restart",
            category: "devops/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: "Проверка диска и памяти",
            category: "devops/ops",
            description: "Запуск диагностических команд на хосте.",
            template_data: {
                name: "ops-disk-memory-check",
                hosts: "all",
                gather_facts: false,
                become: true,
                task_modules: [
                    { name: "Disk usage", module: "command", params: { command: "df -h" } },
                    { name: "Memory usage", module: "command", params: { command: "free -m" } }
                ]
            }
        },
        {
            name: "Базовый firewall baseline",
            category: "devops/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: "Создать служебную группу",
            category: "devops/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: "NTP baseline (chrony)",
            category: "devops/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: "Git clone repo to release dir",
            category: "devops/release",
            description: "Клонирование кода в директорию релиза.",
            template_data: {
                name: "git-clone-release",
                hosts: "app",
                gather_facts: true,
                become: true,
                task_modules: [
                    { name: "Ensure release dir", module: "file", params: { path: "/opt/releases/app", state: "directory", mode: "0755" } },
                    { name: "Clone repository", module: "git", params: { repo: "https://git.example.local/team/app.git", dest: "/opt/releases/app", version: "main" } }
                ]
            }
        },
        {
            name: "Создать пользователя мониторинга",
            category: "devops/monitoring",
            description: "Создание системного пользователя для агентов мониторинга.",
            template_data: {
                name: "create-monitoring-user",
                hosts: "all",
                gather_facts: true,
                become: true,
                task_modules: [
                    { name: "Create monitoring user", module: "user", params: { user_name: "monitoring", user_state: "present" } },
                    { name: "Create monitoring dir", module: "file", params: { path: "/opt/monitoring", state: "directory", mode: "0755" } }
                ]
            }
        }
    ];

    async function api(method, url, data = null) {
        const options = { method, headers: { 'Content-Type': 'application/json' } };
        if (data) options.body = JSON.stringify(data);
        const response = await fetch(url, options);
        const payload = await response.json().catch(() => ({}));
        if (!response.ok) throw new Error(payload.detail || `HTTP ${response.status}`);
        return payload;
    }

    async function loadModules() {
        const data = await api('GET', '/api/builders/modules');
        availableModules = data.modules || {};
    }

    function escapeHtml(value) {
        return String(value ?? '')
            .replaceAll('&', '&amp;')
            .replaceAll('<', '&lt;')
            .replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;')
            .replaceAll("'", '&#39;');
    }

    function parseSimpleYamlToObject(text) {
        const out = {};
        const lines = (text || '').split('\n').map(x => x.trim()).filter(Boolean);
        for (const line of lines) {
            if (!line.includes(':')) continue;
            const [k, ...rest] = line.split(':');
            const raw = rest.join(':').trim();
            if (!k.trim()) continue;
            if (raw === 'true' || raw === 'false') out[k.trim()] = raw === 'true';
            else if (!Number.isNaN(Number(raw)) && raw !== '') out[k.trim()] = Number(raw);
            else out[k.trim()] = raw.replace(/^["']|["']$/g, '');
        }
        return out;
    }

    function renderTaskList() {
        const container = document.getElementById('tpl-tasks-list');
        container.innerHTML = templateTasks.map((task, idx) => {
            const moduleOptions = Object.keys(availableModules).map(key => `<option value="${key}" ${task.module === key ? 'selected' : ''}>${escapeHtml(availableModules[key].name || key)}</option>`).join('');
            const moduleMeta = availableModules[task.module];
            const fields = Array.isArray(moduleMeta?.fields) ? moduleMeta.fields : [];
            return `
                <div class="card" style="padding:12px; margin-bottom:10px;">
                    <div class="form-row">
                        <div class="form-group">
                            <label>Название задачи</label>
                            <input type="text" value="${escapeHtml(task.name || '')}" onchange="updateTaskName(${idx}, this.value)">
                        </div>
                        <div class="form-group">
                            <label>Модуль</label>
                            <select onchange="updateTaskModule(${idx}, this.value)">
                                <option value="">-- Выберите --</option>
                                ${moduleOptions}
                            </select>
                        </div>
                    </div>
                    ${fields.length ? `
                    <div class="form-row">
                        ${fields.map((field) => {
                            const value = task.params?.[field.name];
                            if (field.type === 'checkbox') {
                                return `
                                <div class="form-group">
                                    <label style="display:flex; align-items:center; gap:8px;">
                                        <input type="checkbox" ${value === undefined ? (field.default ? 'checked' : '') : (value ? 'checked' : '')}
                                               onchange="updateTemplateTaskField(${idx}, '${escapeHtml(field.name)}', this.checked, 'checkbox')">
                                        ${escapeHtml(field.label)}${field.required ? ' *' : ''}
                                    </label>
                                </div>`;
                            }
                            if (field.type === 'select') {
                                return `
                                <div class="form-group">
                                    <label>${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                                    <select onchange="updateTemplateTaskField(${idx}, '${escapeHtml(field.name)}', this.value, 'select')">
                                        ${(field.options || []).map((opt) => {
                                            const selected = String(value ?? field.default ?? '') === String(opt) ? 'selected' : '';
                                            return `<option value="${escapeHtml(opt)}" ${selected}>${escapeHtml(opt)}</option>`;
                                        }).join('')}
                                    </select>
                                </div>`;
                            }
                            return `
                            <div class="form-group">
                                <label>${escapeHtml(field.label)}${field.required ? ' *' : ''}</label>
                                <input type="text"
                                       value="${escapeHtml(value ?? field.default ?? '')}"
                                       placeholder="${escapeHtml(field.name)}"
                                       oninput="updateTemplateTaskField(${idx}, '${escapeHtml(field.name)}', this.value, 'text')">
                            </div>`;
                        }).join('')}
                    </div>` : ''}
                    <div class="form-group">
                        <label>Доп. параметры JSON (опционально)</label>
                        <textarea rows="3" onchange="updateTaskParams(${idx}, this.value)" placeholder='{"when":"ansible_os_family == \"Debian\""}'>${escapeHtml(JSON.stringify(task.extra || {}, null, 2))}</textarea>
                    </div>
                    <div style="display:flex; justify-content:flex-end;">
                        <button type="button" class="btn btn-danger btn-sm" onclick="removeTemplateTask(${idx})">Удалить</button>
                    </div>
                </div>
            `;
        }).join('');
    }

    function buildTemplateDataFromForm() {
        const data = {
            name: document.getElementById('template-name').value.trim() || 'Шаблон',
            description: document.getElementById('template-description').value.trim(),
            hosts: document.getElementById('tpl-hosts').value.trim() || 'all',
            gather_facts: document.getElementById('tpl-gather-facts').checked,
            become: document.getElementById('tpl-become').checked,
            task_modules: templateTasks.map((task, idx) => ({
                module: task.module,
                name: task.name || `Task ${idx + 1}`,
                params: { ...(task.params || {}), ...(task.extra || {}) }
            })).filter(t => t.module)
        };
        const connection = document.getElementById('tpl-connection').value;
        if (connection) data.connection = connection;
        const varsText = document.getElementById('tpl-vars').value;
        const parsedVars = parseSimpleYamlToObject(varsText);
        if (Object.keys(parsedVars).length > 0) data.vars = parsedVars;
        return data;
    }

    function refreshTemplatePreview() {
        const preview = document.getElementById('template-data-preview');
        preview.value = JSON.stringify(buildTemplateDataFromForm(), null, 2);
    }

    function addTemplateTask() {
        templateTasks.push({ name: '', module: '', params: {}, extra: {} });
        renderTaskList();
        refreshTemplatePreview();
    }

    function removeTemplateTask(index) {
        templateTasks.splice(index, 1);
        renderTaskList();
        refreshTemplatePreview();
    }

    function updateTaskName(index, value) {
        templateTasks[index].name = value;
        refreshTemplatePreview();
    }

    function updateTaskModule(index, value) {
        templateTasks[index].module = value;
        const moduleMeta = availableModules[value];
        const fields = Array.isArray(moduleMeta?.fields) ? moduleMeta.fields : [];
        const nextParams = {};
        fields.forEach((f) => {
            if (f.default !== undefined) {
                nextParams[f.name] = f.default;
            }
        });
        templateTasks[index].params = nextParams;
        refreshTemplatePreview();
        renderTaskList();
    }

    function updateTemplateTaskField(index, fieldName, rawValue, fieldType) {
        const task = templateTasks[index];
        if (!task) return;
        if (!task.params) task.params = {};
        if (fieldType === 'checkbox') {
            task.params[fieldName] = Boolean(rawValue);
        } else {
            const value = String(rawValue ?? '').trim();
            if (value === '') delete task.params[fieldName];
            else task.params[fieldName] = value;
        }
        refreshTemplatePreview();
    }

    function updateTaskParams(index, raw) {
        try {
            templateTasks[index].extra = raw.trim() ? JSON.parse(raw) : {};
            refreshTemplatePreview();
        } catch (err) {
            alert('Параметры задачи должны быть валидным JSON');
        }
    }

    function openTemplateModal(item = null) {
        document.getElementById('template-modal-title').textContent = item ? 'Редактирование шаблона' : 'Создание шаблона';
        document.getElementById('template-id').value = item?.id || '';
        document.getElementById('template-name').value = item?.name || '';
        document.getElementById('template-category').value = item?.category || 'general';
        document.getElementById('template-description').value = item?.description || '';
        const td = item?.template_data || {};
        document.getElementById('tpl-hosts').value = td.hosts || 'all';
        document.getElementById('tpl-connection').value = td.connection || '';
        document.getElementById('tpl-gather-facts').checked = td.gather_facts !== false;
        document.getElementById('tpl-become').checked = !!td.become;
        document.getElementById('tpl-vars').value = td.vars ? Object.entries(td.vars).map(([k, v]) => `${k}: ${v}`).join('\n') : '';
        templateTasks = (td.task_modules || td.tasks || []).map((t, idx) => {
            const moduleName = t.module || '';
            const moduleFields = new Set(((availableModules[moduleName]?.fields) || []).map((f) => f.name));
            const sourceParams = t.params || {};
            const params = {};
            const extra = {};
            Object.keys(sourceParams).forEach((key) => {
                if (moduleFields.has(key)) params[key] = sourceParams[key];
                else extra[key] = sourceParams[key];
            });
            return {
                name: t.name || `Task ${idx + 1}`,
                module: moduleName,
                params,
                extra
            };
        });
        renderTaskList();
        refreshTemplatePreview();
        document.getElementById('template-modal').classList.add('active');
    }

    function closeTemplateModal() {
        document.getElementById('template-modal').classList.remove('active');
        document.getElementById('template-form').reset();
        document.getElementById('template-category').value = 'general';
        templateTasks = [];
        renderTaskList();
        refreshTemplatePreview();
    }

    async function loadTemplates() {
        const data = await api('GET', '/api/playbook-templates');
        templatesCache = data.items || [];
        const list = document.getElementById('templates-list');
        if (!templatesCache.length) {
            list.innerHTML = '<div class="empty-state">Шаблоны отсутствуют</div>';
            return;
        }
        list.innerHTML = templatesCache.map(item => `
            <div class="list-item">
                <div class="list-item-info">
                    <div class="list-item-name">${item.name}</div>
                    <div class="list-item-meta">
                        <span>Категория: ${item.category || 'general'}</span>
                        <span>${item.description || 'Без описания'}</span>
                    </div>
                </div>
                <div class="list-item-actions">
                    <button class="btn btn-secondary btn-sm" onclick='openTemplateModal(${JSON.stringify(item)})'>Редактировать</button>
                    <button class="btn btn-danger btn-sm" onclick="deleteTemplate(${item.id}, '${(item.name || '').replace(/'/g, "\\'")}')">Удалить</button>
                </div>
            </div>
        `).join('');
    }

    function openLibraryModal() {
        const list = document.getElementById('library-list');
        list.innerHTML = DEVOPS_LIBRARY.map((item, idx) => `
            <div class="list-item">
                <div class="list-item-info">
                    <div class="list-item-name">${escapeHtml(item.name)}</div>
                    <div class="list-item-meta">
                        <span>Категория: ${escapeHtml(item.category)}</span>
                        <span>${escapeHtml(item.description || '')}</span>
                    </div>
                </div>
                <div class="list-item-actions">
                    <button class="btn btn-success btn-sm" onclick="importLibraryTemplate(${idx})">Добавить в мои шаблоны</button>
                    <button class="btn btn-secondary btn-sm" onclick="useLibraryTemplate(${idx})">Открыть в редакторе</button>
                </div>
            </div>
        `).join('');
        document.getElementById('library-modal').classList.add('active');
    }

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

    async function importLibraryTemplate(index) {
        const item = DEVOPS_LIBRARY[index];
        if (!item) return;
        try {
            await api('POST', '/api/playbook-templates', {
                name: item.name,
                category: item.category,
                description: item.description || '',
                template_data: item.template_data,
            });
            await loadTemplates();
            alert(`Шаблон "${item.name}" добавлен.`);
        } catch (e) {
            alert(`Ошибка импорта шаблона: ${e.message || e}`);
        }
    }

    function useLibraryTemplate(index) {
        const item = DEVOPS_LIBRARY[index];
        if (!item) return;
        openTemplateModal({
            id: '',
            name: item.name,
            category: item.category,
            description: item.description || '',
            template_data: item.template_data,
        });
        closeLibraryModal();
    }

    async function deleteTemplate(id, name) {
        if (!await awmConfirm(`Удалить шаблон "${name}"?`)) return;
        await api('DELETE', `/api/playbook-templates/${id}`);
        await loadTemplates();
    }

    document.getElementById('template-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const id = document.getElementById('template-id').value;
        const parsed = buildTemplateDataFromForm();
        const payload = {
            name: document.getElementById('template-name').value.trim(),
            category: document.getElementById('template-category').value.trim() || 'general',
            description: document.getElementById('template-description').value.trim(),
            template_data: parsed
        };
        if (id) {
            await api('PUT', `/api/playbook-templates/${id}`, payload);
        } else {
            await api('POST', '/api/playbook-templates', payload);
        }
        closeTemplateModal();
        await loadTemplates();
    });

    ['template-name', 'template-description', 'template-category', 'tpl-hosts', 'tpl-connection', 'tpl-gather-facts', 'tpl-become', 'tpl-vars']
        .forEach(id => document.getElementById(id).addEventListener('input', refreshTemplatePreview));
    document.getElementById('tpl-gather-facts').addEventListener('change', refreshTemplatePreview);
    document.getElementById('tpl-become').addEventListener('change', refreshTemplatePreview);

    (async () => {
        await loadModules();
        await loadTemplates();
        refreshTemplatePreview();
    })();
</script>
{% endblock %}