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

{% block title %}Хосты - AWM{% endblock %}

{% block extra_head %}
<style>
    .hosts-page { display: grid; gap: 16px; min-width: 0; }
    .hosts-panel {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        padding: 16px 18px;
        min-width: 0;
    }
    .hosts-modal-tabs { gap: 2px; }
    .hosts-modal-tabs .ui-tab { padding: 8px 10px; }
    .hosts-pane { display: none; min-width: 0; }
    .hosts-pane.active { display: block; }
    .hosts-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin-bottom: 12px;
    }
    .hosts-filters .form-control { max-width: 320px; }
    .hosts-filters select.form-control { max-width: 220px; }
    .hosts-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
    .hosts-table-wrap .data-table { margin: 0; }
    .hosts-filters .hosts-search { position: relative; flex: 1 1 260px; max-width: 320px; }
    .hosts-filters .hosts-search .ui-svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
    .hosts-filters .hosts-search .form-control { padding-left: 38px; max-width: none; width: 100%; }
    .hosts-table-wrap tbody tr.is-clickable { cursor: pointer; }
    .hosts-table-wrap tbody tr.is-clickable:hover { background: var(--bg-secondary); }
    .hosts-table-wrap tbody tr.is-clickable:hover .hosts-row-go { color: var(--primary); }
    .hosts-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .hosts-name > .ui-svg { color: var(--gray-400); }
    .hosts-name strong { word-break: break-word; }
    .hosts-name .hosts-mono { margin-top: 2px; }
    #hosts-table .data-table { min-width: 860px; }
    #hosts-table td:first-child { min-width: 220px; }
    #hosts-table .hosts-name .hosts-mono { word-break: normal; white-space: nowrap; }
    #hosts-table .ui-status,
    #hosts-table .hosts-chip { white-space: nowrap; }
    .hosts-source { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-600); }
    .hosts-source .ui-svg { color: var(--gray-400); }
    .hosts-muted { color: var(--text-muted); font-size: 12px; }
    .hosts-row-go { width: 32px; text-align: right; color: var(--gray-400); }
    .hosts-loading { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
    .hosts-card-os { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gray-600); }
    .hosts-card-os .ui-svg { color: var(--gray-400); }
    .hosts-mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
        color: var(--gray-600);
        word-break: break-all;
    }
    .hosts-chip {
        display: inline-block;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        color: var(--gray-700);
        margin: 0 4px 4px 0;
        white-space: nowrap;
    }
    .hosts-chip.is-prod { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
    .hosts-chip.is-stage { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
    .hosts-chip.is-test,
    .hosts-chip.is-dev { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
    .hosts-modal-content {
        max-width: min(1080px, 96vw);
        width: 100%;
        max-height: 92vh;
        padding: 28px 32px 24px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .hosts-modal-content.is-narrow { max-width: min(640px, 96vw); }
    .hosts-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
        margin-right: -4px;
    }
    .hosts-modal-footer {
        flex-shrink: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
    }
    .hosts-modal-footer .hosts-footer-left { margin-right: auto; display: flex; gap: 10px; }
    .hosts-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
    .hosts-kv {
        display: grid;
        grid-template-columns: minmax(140px, 220px) 1fr;
        gap: 8px 16px;
        font-size: 13px;
        margin: 0;
    }
    .hosts-kv dt { color: var(--text-muted); }
    .hosts-kv dd { margin: 0; color: var(--gray-800); word-break: break-word; }
    .hosts-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .hosts-block {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-secondary);
        padding: 14px 16px;
        min-width: 0;
    }
    .hosts-block h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--gray-800); }
    .hosts-card-head .ui-status { margin-right: 4px; }
    .hosts-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .hosts-metric {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        padding: 10px 12px;
    }
    .hosts-metric-label { font-size: 12px; color: var(--text-muted); }
    .hosts-metric-value { font-size: 20px; font-weight: 700; color: var(--gray-900); margin-top: 2px; }
    .hosts-list { display: flex; flex-direction: column; gap: 8px; }
    .hosts-list-item {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        padding: 10px 12px;
        font-size: 13px;
        min-width: 0;
    }
    .hosts-list-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
    .hosts-list-item-title { font-weight: 600; color: var(--gray-800); word-break: break-word; }
    .hosts-list-item-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; word-break: break-word; }
    .hosts-alias-row { display: flex; gap: 8px; margin-top: 10px; }
    .hosts-alias-row .form-control { flex: 1 1 auto; }
    .hosts-chip-remove {
        border: none;
        background: transparent;
        color: var(--gray-500);
        cursor: pointer;
        padding: 0 0 0 4px;
        font-size: 13px;
        line-height: 1;
    }
    .hosts-chip-remove:hover { color: var(--danger); }
    .hosts-modal-content:not(.is-narrow) .hosts-modal-body { min-height: min(460px, 60vh); }
    .hosts-form-grid { display: grid; gap: 14px; }
    .hosts-form-grid > .form-group { margin-bottom: 0; }
    .hosts-form-grid textarea { min-height: 0; }
    .hosts-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .hosts-required { color: var(--danger); }
    /* Форма открывается и поверх окна просмотра (профили → изменение профиля). */
    #hosts-form-modal { z-index: 1001; }
    .hosts-checklist {
        max-height: min(380px, 45vh);
        overflow-y: auto;
        margin-top: 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
    }
    .hosts-checklist-row {
        display: grid;
        grid-template-columns: 1fr 150px;
        gap: 10px;
        align-items: center;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        font-size: 13px;
    }
    .hosts-checklist-row:last-child { border-bottom: none; }
    .hosts-checklist-row label { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; min-width: 0; }
    .hosts-checklist-row label span { word-break: break-word; }
    .hosts-checklist-row .form-control { padding: 6px 10px; font-size: 13px; }
    .hosts-cmd { font-size: 12px; color: var(--text-muted); word-break: break-all; margin-top: 4px; }
    .hosts-pre {
        margin: 8px 0 0;
        padding: 8px 10px;
        max-height: 240px;
        overflow: auto;
        white-space: pre-wrap;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-secondary);
    }
    .hosts-timeline { display: flex; flex-direction: column; gap: 8px; }
    .hosts-timeline-item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
    .hosts-timeline-dot {
        width: 10px;
        height: 10px;
        margin-top: 14px;
        border-radius: 50%;
        background: var(--primary);
    }
    .hosts-timeline-dot.is-danger { background: var(--danger); }
    .hosts-timeline-dot.is-warning { background: var(--warning); }
    .hosts-timeline-dot.is-success { background: var(--success); }
    .hosts-player-screen {
        width: 100%;
        min-height: 320px;
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-secondary);
    }
    .hosts-player-screen.is-terminal { padding: 8px; }
    .hosts-player-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
    #hosts-view-modal .hosts-player-seek {
        flex: 1 1 200px;
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        accent-color: var(--primary);
    }
    @media (max-width: 760px) {
        .hosts-grid-2,
        .hosts-form-pair { grid-template-columns: 1fr; }
        .hosts-kv { grid-template-columns: 1fr; }
        .hosts-checklist-row { grid-template-columns: 1fr; }
        .hosts-modal-content { padding: 20px 16px 16px; }
    }
</style>
{% endblock %}

{% block content %}
<div class="hosts-page">
    <div class="ui-page-header">
        <div class="ui-page-header__main">
            <span class="ui-page-header__icon">{{ nav_icon('hosts') }}</span>
            <div>
                <h2 class="ui-page-header__title">Хосты</h2>
                <p class="ui-page-header__subtitle">Единый реестр хостов: метрики, системный журнал, запуски, доступ, актив и лента изменений по каждому хосту.</p>
            </div>
        </div>
        {% if can_manage %}
        <div class="ui-page-header__actions">
            <button type="button" class="btn btn-secondary" onclick="hostsOpenDiscover()">{{ ui_icon('scan') }}Обнаружить хосты</button>
            <button type="button" class="btn btn-primary" onclick="hostsOpenEdit()">{{ ui_icon('plus') }}Добавить хост</button>
        </div>
        {% endif %}
    </div>

    <div class="hosts-panel">
        <div class="ui-tabs" role="tablist" id="hosts-section-tabs">
            <button type="button" class="ui-tab hosts-tab active" data-section="registry" role="tab">{{ ui_icon('list') }}Реестр</button>
            <button type="button" class="ui-tab hosts-tab" data-section="remediation" role="tab">{{ ui_icon('wand') }}Автоисправление</button>
            <button type="button" class="ui-tab hosts-tab" data-section="drift" role="tab">{{ ui_icon('diff') }}Контроль дрейфа</button>
            <button type="button" class="ui-tab hosts-tab" data-section="approvals" role="tab">{{ ui_icon('user-check') }}Согласования</button>
            <button type="button" class="ui-tab hosts-tab" data-section="compliance" role="tab">{{ ui_icon('shield-check') }}Соответствие</button>
            {% if can_recordings %}
            <button type="button" class="ui-tab hosts-tab" data-section="recordings" role="tab">{{ ui_icon('video') }}Записи сессий</button>
            {% endif %}
            {% if can_manage_approvals or can_settings %}
            <button type="button" class="ui-tab hosts-tab" data-section="settings" role="tab">{{ ui_icon('sliders') }}Настройки</button>
            {% endif %}
        </div>

        <div class="hosts-pane active" id="hosts-section-registry" role="tabpanel">
            <div class="ui-stats" id="hosts-stats"></div>
            <div class="hosts-filters">
                <div class="hosts-search">{{ ui_icon('search') }}<input type="search" id="hosts-search" class="form-control" placeholder="Имя, адрес или метка"></div>
                <select id="hosts-env-filter" class="form-control">
                    <option value="">Все окружения</option>
                    <option value="prod">Промышленное</option>
                    <option value="stage">Предпромышленное</option>
                    <option value="test">Тестовое</option>
                    <option value="dev">Разработка</option>
                </select>
            </div>
            <div id="hosts-table"><div class="hosts-loading">Загрузка…</div></div>
        </div>
        <div class="hosts-pane" id="hosts-section-remediation" role="tabpanel"></div>
        <div class="hosts-pane" id="hosts-section-drift" role="tabpanel"></div>
        <div class="hosts-pane" id="hosts-section-approvals" role="tabpanel"></div>
        <div class="hosts-pane" id="hosts-section-compliance" role="tabpanel"></div>
        <div class="hosts-pane" id="hosts-section-recordings" role="tabpanel"></div>
        <div class="hosts-pane" id="hosts-section-settings" role="tabpanel"></div>
    </div>
</div>

<div id="hosts-card-modal" class="modal">
    <div class="modal-content hosts-modal-content">
        <div class="modal-header">
            <div>
                <h3 id="hosts-card-title">Хост</h3>
                <div class="hosts-card-head" id="hosts-card-head"></div>
            </div>
            <button type="button" class="close-btn" onclick="hostsCloseModal('hosts-card-modal')">&times;</button>
        </div>
        <div class="ui-tabs hosts-modal-tabs" role="tablist" id="hosts-card-tabs">
            <button type="button" class="ui-tab hosts-tab active" data-card-tab="overview" role="tab">Обзор</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="timeline" role="tab">Что изменилось</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="metrics" role="tab">Метрики</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="syslog" role="tab">Журнал</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="runs" role="tab">Запуски</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="access" role="tab">Доступ</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="sessions" role="tab">Сессии</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="drift" role="tab">Дрейф</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="compliance" role="tab">Соответствие</button>
            <button type="button" class="ui-tab hosts-tab" data-card-tab="audit" role="tab">Аудит</button>
        </div>
        <div class="hosts-modal-body">
            <div class="hosts-pane active" data-card-pane="overview"></div>
            <div class="hosts-pane" data-card-pane="timeline"></div>
            <div class="hosts-pane" data-card-pane="sessions"></div>
            <div class="hosts-pane" data-card-pane="drift"></div>
            <div class="hosts-pane" data-card-pane="compliance"></div>
            <div class="hosts-pane" data-card-pane="metrics"></div>
            <div class="hosts-pane" data-card-pane="syslog"></div>
            <div class="hosts-pane" data-card-pane="runs"></div>
            <div class="hosts-pane" data-card-pane="access"></div>
            <div class="hosts-pane" data-card-pane="audit"></div>
        </div>
        <div class="hosts-modal-footer">
            {% if can_manage %}
            <div class="hosts-footer-left">
                <button type="button" class="btn btn-danger" onclick="hostsDeleteCurrent()">{{ ui_icon('trash') }}Удалить</button>
            </div>
            <button type="button" class="btn btn-secondary" onclick="hostsCloseModal('hosts-card-modal')">Закрыть</button>
            <button type="button" class="btn btn-primary" onclick="hostsEditCurrent()">{{ ui_icon('edit') }}Изменить</button>
            {% else %}
            <button type="button" class="btn btn-secondary" onclick="hostsCloseModal('hosts-card-modal')">Закрыть</button>
            {% endif %}
        </div>
    </div>
</div>

{% if can_manage %}
<div id="hosts-edit-modal" class="modal">
    <div class="modal-content hosts-modal-content is-narrow">
        <div class="modal-header">
            <h3 id="hosts-edit-title">Новый хост</h3>
            <button type="button" class="close-btn" onclick="hostsCloseModal('hosts-edit-modal')">&times;</button>
        </div>
        <div class="hosts-modal-body">
            <div class="hosts-form-grid">
                <div class="form-group">
                    <label for="hosts-f-name">Имя <span class="hosts-required">*</span></label>
                    <input id="hosts-f-name" class="form-control" type="text" maxlength="255" placeholder="srv-app-01.example.com">
                    <span class="form-hint">Имя и адрес автоматически становятся псевдонимами для сопоставления с мониторингом, журналом и запусками.</span>
                </div>
                <div class="hosts-form-pair">
                    <div class="form-group">
                        <label for="hosts-f-address">Адрес</label>
                        <input id="hosts-f-address" class="form-control" type="text" maxlength="255" placeholder="10.0.0.10">
                    </div>
                    <div class="form-group">
                        <label for="hosts-f-os">Семейство ОС</label>
                        <select id="hosts-f-os" class="form-control">
                            <option value="">Не определено</option>
                            <option value="Linux">Linux</option>
                            <option value="Windows">Windows</option>
                            <option value="Astra Linux">Astra Linux</option>
                            <option value="РЕД ОС">РЕД ОС</option>
                            <option value="ALT Linux">ALT Linux</option>
                            <option value="Debian">Debian</option>
                            <option value="Ubuntu">Ubuntu</option>
                            <option value="CentOS">CentOS</option>
                            <option value="macOS">macOS</option>
                        </select>
                        <span class="form-hint">Подставляется по агенту мониторинга. Если определить не удалось, выберите из списка.</span>
                    </div>
                </div>
                <div class="hosts-form-pair">
                    <div class="form-group">
                        <label for="hosts-f-env">Окружение</label>
                        <select id="hosts-f-env" class="form-control">
                            <option value="">Не задано</option>
                            <option value="prod">Промышленное</option>
                            <option value="stage">Предпромышленное</option>
                            <option value="test">Тестовое</option>
                            <option value="dev">Разработка</option>
                        </select>
                        <span class="form-hint">Операции на промышленных хостах могут требовать согласования.</span>
                    </div>
                    <div class="form-group">
                        <label for="hosts-f-asset">Актив (инвентарный номер)</label>
                        <input id="hosts-f-asset" class="form-control" type="text" maxlength="128" placeholder="Не привязан">
                        <span class="form-hint">Инвентарный номер, серийный номер или штрихкод актива.</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="hosts-f-labels">Метки</label>
                    <input id="hosts-f-labels" class="form-control" type="text" maxlength="1000" placeholder="db, critical">
                    <span class="form-hint">Через запятую.</span>
                </div>
                <div class="form-group">
                    <label for="hosts-f-desc">Описание</label>
                    <textarea id="hosts-f-desc" class="form-control" rows="3" maxlength="4000"></textarea>
                </div>
            </div>
        </div>
        <div class="hosts-modal-footer">
            <button type="button" class="btn btn-secondary" onclick="hostsCloseModal('hosts-edit-modal')">Отмена</button>
            <button type="button" class="btn btn-primary" onclick="hostsSaveEdit()">Сохранить</button>
        </div>
    </div>
</div>

<div id="hosts-discover-modal" class="modal">
    <div class="modal-content hosts-modal-content">
        <div class="modal-header">
            <h3>Обнаружение хостов</h3>
            <button type="button" class="close-btn" onclick="hostsCloseModal('hosts-discover-modal')">&times;</button>
        </div>
        <div class="hosts-modal-body">
            <p class="form-hint">Кандидаты собраны из доступных вам агентов мониторинга, инвентарей и подключений удалённого управления. Для уже зарегистрированных хостов будут добавлены новые псевдонимы.</p>
            <div id="hosts-discover-list"><div class="hosts-loading">Загрузка…</div></div>
        </div>
        <div class="hosts-modal-footer">
            <button type="button" class="btn btn-secondary" onclick="hostsCloseModal('hosts-discover-modal')">Отмена</button>
            <button type="button" class="btn btn-primary" id="hosts-discover-apply" onclick="hostsApplyDiscover()">{{ ui_icon('plus') }}Добавить выбранные</button>
        </div>
    </div>
</div>
{% endif %}

<div id="hosts-form-modal" class="modal">
    <div class="modal-content hosts-modal-content is-narrow">
        <div class="modal-header">
            <h3 id="hosts-form-title">Параметры</h3>
            <button type="button" class="close-btn" onclick="hostsCloseModal('hosts-form-modal')">&times;</button>
        </div>
        <div class="hosts-modal-body"><div class="hosts-form-grid" id="hosts-form-body"></div></div>
        <div class="hosts-modal-footer">
            <button type="button" class="btn btn-secondary" onclick="hostsCloseModal('hosts-form-modal')">Отмена</button>
            <button type="button" class="btn btn-primary" id="hosts-form-submit">Сохранить</button>
        </div>
    </div>
</div>

<div id="hosts-view-modal" class="modal">
    <div class="modal-content hosts-modal-content">
        <div class="modal-header">
            <div>
                <h3 id="hosts-view-title">Просмотр</h3>
                <div class="hosts-card-head" id="hosts-view-head"></div>
            </div>
            <button type="button" class="close-btn" onclick="hostsCloseModal('hosts-view-modal')">&times;</button>
        </div>
        <div class="hosts-modal-body" id="hosts-view-body"></div>
        <div class="hosts-modal-footer" id="hosts-view-footer">
            <button type="button" class="btn btn-secondary" onclick="hostsCloseModal('hosts-view-modal')">Закрыть</button>
        </div>
    </div>
</div>

<script type="application/json" id="hosts-page-config">{{ {"can_manage": can_manage, "can_automation": can_automation, "can_compliance_commands": can_compliance_commands, "can_admin": can_admin, "can_recordings": can_recordings, "can_approvals": can_approvals, "can_manage_approvals": can_manage_approvals, "can_settings": can_settings, "can_run": can_run}|tojson }}</script>
<script src="/static/js/hosts.js?v=hosts5"></script>
<script src="/static/js/hosts-automation.js?v=hosts5"></script>
{% endblock %}