{% 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 %}
<div class="card">
    <div class="ui-page-header is-inset">
        <div class="ui-page-header__main">
            <span class="ui-page-header__icon">{{ ui_icon('bell') }}</span>
            <div>
                <h2 class="ui-page-header__title">Оповещения мониторинга</h2>
                <p class="ui-page-header__subtitle">Уведомления по хостам, к которым у вас есть доступ. Канал доставки (Telegram, webhook и т.д.) настраивается в
                    <a href="/profile">Профиль → Оповещения</a>, если включено «Использовать канал из профиля».</p>
            </div>
        </div>
        <div class="ui-page-header__actions">
            <a href="/monitoring" class="btn btn-secondary">{{ ui_icon('arrow-left') }}К мониторингу</a>
        </div>
    </div>

    <div id="mn-user-loading" class="loading">Загрузка...</div>
    <form id="mn-user-form" style="display:none;">
        <section class="card" style="padding:16px;margin-bottom:16px;">
            <label style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
                <input type="checkbox" id="mn-user-enabled">
                Включить личные оповещения мониторинга
            </label>
            <label style="display:flex;align-items:center;gap:8px;">
                <input type="checkbox" id="mn-user-inherit-profile" checked>
                Использовать канал из профиля (Профиль → Оповещения)
            </label>
        </section>

        <section class="card" style="padding:16px;margin-bottom:16px;">
            <h3 style="margin-top:0;">События</h3>
            <div id="mn-user-events" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;"></div>
        </section>

        <section class="card" style="padding:16px;margin-bottom:16px;">
            <h3 style="margin-top:0;">Пороги (%)</h3>
            <p style="font-size:13px;color:var(--gray-600);margin:0 0 10px;">
                Оставьте пустым, чтобы использовать системные пороги из настроек мониторинга.
            </p>
            <label style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                <input type="checkbox" id="mn-user-custom-thresholds">
                Свои пороги
            </label>
            <div id="mn-user-thresholds" style="display:none;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;"></div>
        </section>

        <section class="card" style="padding:16px;margin-bottom:16px;">
            <h3 style="margin-top:0;">Хосты</h3>
            <div class="form-group" style="max-width:360px;">
                <label for="mn-user-scope">Область</label>
                <select id="mn-user-scope" class="form-control">
                    <option value="accessible">Все доступные мне хосты</option>
                    <option value="selected">Только выбранные</option>
                </select>
            </div>
            <div id="mn-user-agents-wrap" style="display:none;margin-top:12px;max-height:240px;overflow:auto;border:1px solid var(--gray-200);border-radius:8px;padding:10px;">
                <div id="mn-user-agents-list"></div>
            </div>
        </section>

        <div style="display:flex;gap:10px;">
            <button type="submit" class="btn btn-primary">Сохранить</button>
            <a href="/monitoring" class="btn btn-secondary">Отмена</a>
        </div>
    </form>
</div>
<script src="/static/js/monitoring_notifications.js"></script>
{% endblock %}