{% extends "base.html" %}
{% from 'partials/nav_icon.html' import nav_icon %}
{% from 'partials/ui_icon.html' import ui_icon %}

{% block title %}Библиотека мониторинга - AWM{% endblock %}

{% block content %}
<style>
    .ml-library .ml-panel-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    .ml-library .ml-panel-head h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }
    .ml-table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }
    .ml-library .ml-table {
        margin: 0;
    }
    .ml-library .ml-table th:last-child,
    .ml-library .ml-table td.ml-cell-actions {
        width: 1%;
        white-space: nowrap;
        text-align: right;
    }
    .ml-library .ml-cell-name {
        font-weight: 500;
        color: var(--gray-800);
        max-width: 280px;
    }
    .ml-library .ml-cell-mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        color: var(--gray-700);
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ml-library .ml-cell-formula {
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: var(--gray-600);
    }
    .ml-library .ml-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        background: color-mix(in srgb, var(--primary) 12%, transparent);
        color: var(--primary);
    }
    .ml-library .ml-row-actions {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        justify-content: flex-end;
    }
    .ml-library .ml-empty {
        padding: 28px 16px;
        text-align: center;
        color: var(--gray-600);
        font-size: 14px;
        border: 1px dashed var(--border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--surface) 92%, var(--border));
    }
    .ml-hosts-checklist {
        max-height: 280px;
        overflow-y: auto;
        padding: 4px 0;
    }
    .ml-hosts-checklist label {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 8px 10px;
        margin: 0;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.12s;
    }
    .ml-hosts-checklist label:hover {
        background: color-mix(in srgb, var(--primary) 6%, transparent);
    }
    .ml-library .ml-form-hint {
        margin: 6px 0 0;
        font-size: 12px;
        color: var(--gray-600);
    }
    .ml-library #ml-f-file.form-control {
        padding: 8px;
    }
    #ml-edit-modal .modal-content--wide {
        max-width: 720px;
    }
    .monitoring-mh-overlay {
        position: fixed;
        inset: 0;
        z-index: 10050;
        background: rgba(15, 23, 42, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    .monitoring-mh-overlay .card {
        width: min(640px, 96vw);
        max-height: 90vh;
        overflow: auto;
        padding: 16px;
    }
    .monitoring-mh-overlay .mh-picker-card--wide {
        width: min(720px, 96vw);
    }
    .mh-formula-display {
        font-family: ui-monospace, monospace;
        font-size: 14px;
        min-height: 48px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: color-mix(in srgb, var(--surface) 92%, var(--gray-100) 8%);
        word-break: break-all;
        line-height: 1.45;
    }
    .mh-formula-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }
    .mh-formula-num-wrap {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .mh-formula-num-input {
        width: 88px;
        min-height: 31px;
    }
    .mh-formula-preview {
        font-size: 13px;
        color: var(--gray-600);
    }
    .mh-picker-list {
        max-height: min(52vh, 420px);
        overflow: auto;
        margin-top: 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px;
    }
    .mh-picker-group + .mh-picker-group {
        margin-top: 12px;
    }
    .mh-picker-group-title {
        margin: 0 0 6px;
        font-size: 12px;
        font-weight: 700;
        color: var(--gray-600);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .mh-picker-group-count {
        font-weight: 500;
        opacity: 0.7;
    }
    .mh-picker-group-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 6px;
    }
    .mh-picker-item {
        text-align: left;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        cursor: pointer;
    }
    .mh-picker-item:hover {
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    }
    .mh-picker-item-title {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-800);
    }
    .mh-picker-item-key {
        font-size: 11px;
        color: var(--gray-500);
    }
    .mh-picker-empty {
        padding: 12px;
        color: var(--gray-500);
        text-align: center;
    }
    .ml-profile-metrics {
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        margin-top: 8px;
    }
    .ml-profile-metrics table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }
    .ml-profile-metrics th,
    .ml-profile-metrics td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        text-align: left;
    }
    .ml-profile-metrics th {
        background: color-mix(in srgb, var(--surface) 90%, var(--gray-100) 10%);
        font-weight: 600;
    }
    .ml-profile-metrics tr:last-child td {
        border-bottom: none;
    }
    .ml-profile-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }
</style>
<div class="card ml-library">
    <div class="ui-page-header is-inset">
        <div class="ui-page-header__main">
            <span class="ui-page-header__icon">{{ ui_icon('box') }}</span>
            <div>
                <h2 class="ui-page-header__title">Библиотека мониторинга</h2>
                <p class="ui-page-header__subtitle">Общие триггеры, формулы, профили метрик и скрипты (Linux <code>.sh</code>, Windows <code>.ps1</code>).
                    Записи с префиксом <strong>«Пример:»</strong> создаются при установке и обновлении.
                    Редактирование библиотеки и применение к хостам — по правам роли.</p>
            </div>
        </div>
        <div class="ui-page-header__actions">
            <a href="/monitoring" class="btn btn-secondary">{{ ui_icon('arrow-left') }}К мониторингу</a>
        </div>
    </div>

    <nav class="ui-tabs" role="tablist" aria-label="Разделы библиотеки">
        <button type="button" class="ui-tab ml-tab active" role="tab" aria-selected="true" data-tab="triggers">{{ ui_icon('activity') }}Триггеры</button>
        <button type="button" class="ui-tab ml-tab" role="tab" aria-selected="false" data-tab="derived">{{ ui_icon('code') }}Формулы</button>
        <button type="button" class="ui-tab ml-tab" role="tab" aria-selected="false" data-tab="profiles">{{ ui_icon('chart') }}Профили метрик</button>
        <button type="button" class="ui-tab ml-tab" role="tab" aria-selected="false" data-tab="scripts">{{ ui_icon('terminal') }}Скрипты</button>
    </nav>

    <section class="ml-panel" data-panel="triggers">
        <div class="ml-panel-head">
            <h3>Триггеры</h3>
            {% if can_manage_library %}<button type="button" class="btn btn-primary btn-sm" id="ml-trigger-add">+ Добавить</button>{% endif %}
        </div>
        <div id="ml-triggers-list"></div>
    </section>

    <section class="ml-panel" data-panel="derived" hidden>
        <div class="ml-panel-head">
            <h3>Вычисляемые метрики (формулы)</h3>
            {% if can_manage_library %}<button type="button" class="btn btn-primary btn-sm" id="ml-derived-add">+ Добавить</button>{% endif %}
        </div>
        <div id="ml-derived-list"></div>
    </section>

    <section class="ml-panel" data-panel="profiles" hidden>
        <div class="ml-panel-head">
            <h3>Профили метрик</h3>
            {% if can_manage_library %}<button type="button" class="btn btn-primary btn-sm" id="ml-profile-add">+ Добавить</button>{% endif %}
        </div>
        <div id="ml-profiles-list"></div>
    </section>

    <section class="ml-panel" data-panel="scripts" hidden>
        <div class="ml-panel-head">
            <h3>Скрипты для распространения</h3>
            {% if can_manage_library %}<button type="button" class="btn btn-primary btn-sm" id="ml-script-upload">+ Загрузить скрипт</button>{% endif %}
        </div>
        <div id="ml-scripts-list"></div>
    </section>
</div>

<div id="ml-apply-modal" class="modal">
    <div class="modal-content" style="max-width:560px;">
        <div class="modal-header">
            <h3 id="ml-apply-title">Применить к хостам</h3>
            <button type="button" class="close-btn" id="ml-apply-close">&times;</button>
        </div>
        <p style="font-size:13px;color:var(--gray-600);">Выберите хосты. Для скриптов файлы доставляются в <code>agent-scp</code> при следующем push.</p>
        <div id="ml-apply-hosts" class="ml-hosts-checklist"></div>
        <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:14px;">
            <button type="button" class="btn btn-secondary" id="ml-apply-cancel">Отмена</button>
            <button type="button" class="btn btn-primary" id="ml-apply-submit">Применить</button>
        </div>
    </div>
</div>

<div id="ml-edit-modal" class="modal">
    <div class="modal-content modal-content--wide" style="max-height:90vh;overflow:auto;">
        <div class="modal-header">
            <h3 id="ml-edit-title">Редактирование</h3>
            <button type="button" class="close-btn" id="ml-edit-close">&times;</button>
        </div>
        <div id="ml-edit-body"></div>
        <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:14px;">
            <button type="button" class="btn btn-secondary" id="ml-edit-cancel">Отмена</button>
            <button type="button" class="btn btn-primary" id="ml-edit-save">Сохранить</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    window.AWM_MONITORING_LIBRARY = {
        canManage: {{ 'true' if can_manage_library else 'false' }},
    };
</script>
<script src="/static/js/monitoring_metric_picker.js?v=ui-icons-1"></script>
<script src="/static/js/monitoring_library.js?v=ui-icons-1"></script>
{% endblock %}