{% extends "base.html" %}

{% block title %}Системный журнал - AWM{% endblock %}

{% block content %}
<style>
    .syslog-page {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
    .syslog-hero {
        display: flex; justify-content: space-between; align-items: flex-start;
        gap: 16px; flex-wrap: wrap;
    }
    .syslog-hero h1 { margin: 0; font-size: 1.5rem; color: var(--gray-900); }
    .syslog-hero .admin-subtitle { margin: 8px 0 0; max-width: none; }
    .syslog-tabs {
        display: flex; gap: 8px; flex-wrap: wrap;
        border-bottom: 1px solid var(--border); padding-bottom: 8px;
        width: 100%;
    }
    .syslog-tab {
        border: 1px solid var(--border); background: var(--surface);
        color: var(--gray-700); border-radius: 8px; padding: 8px 14px;
        font-weight: 600; cursor: pointer;
    }
    .syslog-tab.is-active {
        border-color: var(--primary); color: var(--primary);
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    }
    .syslog-panel { width: 100%; }
    .syslog-panel[hidden] { display: none !important; }
    .syslog-kpis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
    }
    .syslog-kpis[hidden] { display: none !important; }
    .syslog-analyze-toolbar {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        padding: 16px 18px;
    }
    .syslog-analyze-toolbar__head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px 16px;
        align-items: flex-start;
        margin-bottom: 14px;
    }
    .syslog-analyze-toolbar__head h3 {
        margin: 0;
        font-size: 1.05rem;
        color: var(--gray-900);
    }
    .syslog-analyze-toolbar__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .syslog-analyze-form {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: end;
        margin-bottom: 12px;
    }
    .syslog-analyze-form .form-group { margin: 0; min-width: 0; }
    .syslog-analyze-form label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-700);
    }
    .syslog-analyze-status {
        margin: 12px 0 0;
        padding: 10px 12px;
        border-radius: 8px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 13px;
        max-width: none;
    }
    .syslog-analyze-results {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 16px;
    }
    .syslog-analyze-results[hidden] { display: none !important; }
    .syslog-analyze-results > .syslog-receiver-card {
        margin: 0;
        min-width: 0;
    }
    .syslog-analyze-results > .syslog-analyze-span-2 {
        grid-column: 1 / -1;
    }
    .syslog-analyze-card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }
    .syslog-analyze-card-title h3 {
        margin: 0;
        font-size: 1rem;
        color: var(--gray-900);
    }
    .syslog-table-scroll {
        max-height: 320px;
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 10px;
    }
    .syslog-table-scroll .data-table {
        margin: 0;
    }
    .syslog-table-scroll .data-table th {
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .syslog-patterns-admin {
        margin-top: 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
        padding: 0;
    }
    .syslog-patterns-admin > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
        padding: 14px 16px;
        user-select: none;
    }
    .syslog-patterns-admin > summary::-webkit-details-marker { display: none; }
    .syslog-patterns-admin > summary::after {
        content: "▸";
        margin-left: auto;
        color: var(--gray-500);
        font-size: 12px;
    }
    .syslog-patterns-admin[open] > summary::after { transform: rotate(90deg); }
    .syslog-patterns-admin__body {
        padding: 0 16px 16px;
        border-top: 1px solid var(--border);
    }
    .syslog-patterns-admin__toolbar {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        margin: 12px 0;
    }
    #analyze-kpi-risk.is-ok .syslog-kpi__value { color: var(--success); }
    #analyze-kpi-risk.is-warn .syslog-kpi__value { color: var(--warning); }
    #analyze-kpi-risk.is-crit .syslog-kpi__value { color: var(--danger); }
    @media (max-width: 960px) {
        .syslog-analyze-form { grid-template-columns: 1fr; }
        .syslog-analyze-results { grid-template-columns: 1fr; }
        .syslog-kpis { grid-template-columns: 1fr; }
        .syslog-analyze-results > .syslog-receiver-card > div[style*="grid-template-columns"] {
            grid-template-columns: 1fr !important;
        }
    }
    .syslog-kpi {
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--surface); padding: 14px 16px;
        min-width: 0;
    }
    .syslog-kpi__label { font-size: 12px; color: var(--gray-500); margin-bottom: 6px; }
    .syslog-kpi__value { font-size: 18px; font-weight: 700; color: var(--gray-900); }
    .syslog-kpi__hint { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
    .syslog-kpi.is-ok .syslog-kpi__value { color: var(--success); }
    .syslog-kpi.is-warn .syslog-kpi__value { color: var(--warning); }
    .syslog-kpi.is-off .syslog-kpi__value { color: var(--gray-500); }
    .syslog-filters {
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--surface); padding: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .syslog-filters__summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
        padding: 14px 16px;
        user-select: none;
    }
    .syslog-filters__summary::-webkit-details-marker { display: none; }
    .syslog-filters__summary::after {
        content: "▸";
        margin-left: auto;
        color: var(--gray-500);
        font-size: 12px;
        transition: transform 0.15s ease;
    }
    .syslog-filters[open] > .syslog-filters__summary::after {
        transform: rotate(90deg);
    }
    .syslog-filters__summary-title {
        font-weight: 700;
        color: var(--gray-900);
        font-size: 14px;
    }
    .syslog-filters__summary-hint {
        font-size: 13px;
        color: var(--gray-500);
        max-width: min(640px, 100%);
    }
    .syslog-filters__body {
        padding: 0 16px 16px;
        border-top: 1px solid var(--border);
    }
    .syslog-filters__body .syslog-presets {
        margin-top: 14px;
    }
    .syslog-filters__row {
        display: grid;
        gap: 12px;
        align-items: end;
        margin-bottom: 12px;
    }
    .syslog-filters__row--primary {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) repeat(3, minmax(0, 1fr));
    }
    .syslog-filters__row--secondary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .syslog-filters__row--meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .syslog-filters__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }
    .syslog-filters__checks {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }
    .syslog-filters__checks label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-weight: 500;
        color: var(--gray-700);
        white-space: nowrap;
    }
    .syslog-filters__btns {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .syslog-filters .form-group {
        margin: 0;
        min-width: 0;
    }
    .syslog-filters .form-group label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-700);
    }
    .syslog-filters .form-control {
        width: 100%;
        box-sizing: border-box;
    }
    .syslog-sev-chips-bar {
        margin-top: 12px;
        padding: 0 2px;
    }
    #syslog-table tbody tr.syslog-row--emerg,
    #syslog-table tbody tr.syslog-row--alert,
    #syslog-table tbody tr.syslog-row--crit {
        background: color-mix(in srgb, var(--danger) 22%, var(--surface));
        box-shadow: inset 4px 0 0 var(--danger);
    }
    #syslog-table tbody tr.syslog-row--err {
        background: color-mix(in srgb, var(--danger) 14%, var(--surface));
        box-shadow: inset 4px 0 0 color-mix(in srgb, var(--danger) 80%, var(--border));
    }
    #syslog-table tbody tr.syslog-row--warn {
        background: color-mix(in srgb, var(--warning) 18%, var(--surface));
        box-shadow: inset 4px 0 0 var(--warning);
    }
    #syslog-table tbody tr.syslog-row--notice {
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
        box-shadow: inset 4px 0 0 var(--primary);
    }
    #syslog-table tbody tr.syslog-row--info {
        background: color-mix(in srgb, var(--primary) 6%, var(--surface));
        box-shadow: inset 4px 0 0 color-mix(in srgb, var(--primary) 55%, var(--border));
    }
    #syslog-table tbody tr.syslog-row--debug {
        background: color-mix(in srgb, var(--gray-500) 10%, var(--surface));
        color: var(--gray-700);
        box-shadow: inset 4px 0 0 var(--gray-500);
    }
    #syslog-table tbody tr.syslog-row-new {
        outline: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    }
    #syslog-table td.syslog-msg-cell {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        white-space: pre-wrap;
        word-break: break-word;
        max-width: 42vw;
        line-height: 1.45;
    }
    #syslog-table tbody tr:hover {
        filter: brightness(0.98);
    }
    [data-theme="dark"] #syslog-table tbody tr:hover,
    [data-theme="tux"] #syslog-table tbody tr:hover {
        filter: brightness(1.08);
    }
    .syslog-table-card {
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--surface); padding: 12px 16px 16px;
        width: 100%;
        box-sizing: border-box;
    }
    .syslog-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .syslog-view-toggle {
        display: inline-flex;
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
    }
    .syslog-view-toggle button {
        border: 0;
        background: var(--bg-secondary);
        color: var(--gray-700);
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }
    .syslog-view-toggle button.is-active {
        background: color-mix(in srgb, var(--primary) 16%, var(--surface));
        color: var(--primary);
    }
    /* display:flex иначе перебивает атрибут hidden */
    #syslog-stream[hidden],
    #syslog-table-wrap[hidden] {
        display: none !important;
    }
    .syslog-stream {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: min(70vh, 820px);
        overflow: auto;
        padding: 2px 0;
    }
    .syslog-stream-item {
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px 14px 12px 16px;
        background: var(--surface);
        cursor: pointer;
        box-shadow: inset 4px 0 0 var(--border);
    }
    .syslog-stream-item:hover {
        border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    }
    .syslog-stream-item.syslog-row--emerg,
    .syslog-stream-item.syslog-row--alert,
    .syslog-stream-item.syslog-row--crit {
        background: color-mix(in srgb, var(--danger) 18%, var(--surface));
        box-shadow: inset 4px 0 0 var(--danger);
    }
    .syslog-stream-item.syslog-row--err {
        background: color-mix(in srgb, var(--danger) 12%, var(--surface));
        box-shadow: inset 4px 0 0 color-mix(in srgb, var(--danger) 80%, var(--border));
    }
    .syslog-stream-item.syslog-row--warn {
        background: color-mix(in srgb, var(--warning) 16%, var(--surface));
        box-shadow: inset 4px 0 0 var(--warning);
    }
    .syslog-stream-item.syslog-row--notice {
        background: color-mix(in srgb, var(--primary) 11%, var(--surface));
        box-shadow: inset 4px 0 0 var(--primary);
    }
    .syslog-stream-item.syslog-row--info {
        background: color-mix(in srgb, var(--primary) 6%, var(--surface));
        box-shadow: inset 4px 0 0 color-mix(in srgb, var(--primary) 55%, var(--border));
    }
    .syslog-stream-item.syslog-row--debug {
        background: color-mix(in srgb, var(--gray-500) 9%, var(--surface));
        box-shadow: inset 4px 0 0 var(--gray-500);
        color: var(--gray-700);
    }
    .syslog-stream-item.syslog-row-new {
        outline: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    }
    .syslog-stream-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .syslog-stream-time {
        font-size: 12px;
        color: var(--gray-500);
        line-height: 1.35;
        min-width: 0;
    }
    .syslog-stream-time strong {
        display: block;
        color: var(--gray-800);
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 2px;
    }
    .syslog-stream-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .syslog-stream-chip {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        max-width: 100%;
        padding: 4px 10px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        font-size: 12.5px;
        color: var(--gray-800);
        line-height: 1.3;
    }
    .syslog-stream-chip__label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--gray-500);
        flex-shrink: 0;
    }
    .syslog-stream-chip__value {
        min-width: 0;
        word-break: break-word;
    }
    .syslog-stream-msg {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        white-space: pre-wrap;
        word-break: break-word;
        line-height: 1.5;
        color: var(--gray-900);
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
    }
    .syslog-stream-msg mark,
    .syslog-msg-cell mark,
    .syslog-event-msg mark {
        background: color-mix(in srgb, var(--warning) 35%, transparent);
        color: inherit;
        padding: 0 2px;
        border-radius: 3px;
    }
    .syslog-event-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        margin-bottom: 14px;
    }
    .syslog-event-field label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-500);
        margin-bottom: 4px;
    }
    .syslog-event-field div {
        font-size: 14px;
        color: var(--gray-900);
        word-break: break-word;
    }
    .syslog-event-block-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--gray-800);
        margin: 12px 0 6px;
    }
    .syslog-event-msg,
    .syslog-event-raw {
        white-space: pre-wrap;
        word-break: break-word;
        background: var(--input-bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px 14px;
        max-height: 28vh;
        overflow: auto;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        line-height: 1.45;
        margin: 0;
    }
    @media (max-width: 900px) {
        .syslog-event-grid {
            grid-template-columns: 1fr;
        }
        #syslog-table td.syslog-msg-cell {
            max-width: 70vw;
        }
    }
    .syslog-sev {
        display: inline-block; padding: 2px 8px; border-radius: 999px;
        font-size: 12px; font-weight: 600; border: 1px solid var(--border);
        background: var(--bg-secondary);
    }
    .syslog-sev--emerg,
    .syslog-sev--alert,
    .syslog-sev--crit {
        background: color-mix(in srgb, var(--danger) 22%, var(--surface));
        color: var(--danger);
        border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    }
    .syslog-sev--err {
        background: color-mix(in srgb, var(--danger) 14%, var(--surface));
        color: var(--danger);
        border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    }
    .syslog-sev--warn {
        background: color-mix(in srgb, var(--warning) 20%, var(--surface));
        color: var(--warning);
        border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    }
    .syslog-sev--notice {
        background: color-mix(in srgb, var(--primary) 16%, var(--surface));
        color: var(--primary);
        border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    }
    .syslog-sev--info {
        background: color-mix(in srgb, var(--primary) 10%, var(--surface));
        color: var(--gray-800);
        border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    }
    .syslog-sev--debug {
        background: var(--bg-secondary);
        color: var(--gray-500);
        border-color: var(--border);
    }
    .syslog-receiver-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 16px;
        width: 100%;
        align-items: stretch;
    }
    .syslog-receiver-layout > .syslog-receiver-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .syslog-receiver-card {
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--surface); padding: 20px;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }
    .syslog-receiver-card h3 {
        margin: 0 0 8px;
        color: var(--gray-900);
        font-size: 1.05rem;
    }
    .syslog-receiver-card .admin-subtitle {
        margin: 0 0 16px;
        max-width: none;
    }
    .syslog-receiver-spoiler {
        padding: 0;
    }
    .syslog-receiver-spoiler > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
        padding: 16px 20px;
        user-select: none;
    }
    .syslog-receiver-spoiler > summary::-webkit-details-marker { display: none; }
    .syslog-receiver-spoiler > summary::after {
        content: "▸";
        margin-left: auto;
        color: var(--gray-500);
        font-size: 12px;
        transition: transform 0.15s ease;
    }
    .syslog-receiver-spoiler[open] > summary::after {
        transform: rotate(90deg);
    }
    .syslog-receiver-spoiler[open] > summary {
        border-bottom: 1px solid var(--border);
    }
    .syslog-receiver-spoiler__title {
        margin: 0;
        font-weight: 700;
        color: var(--gray-900);
        font-size: 1.05rem;
    }
    .syslog-receiver-spoiler__hint {
        font-size: 13px;
        color: var(--gray-500);
        max-width: min(520px, 100%);
    }
    .syslog-receiver-spoiler__body {
        padding: 16px 20px 20px;
    }
    .syslog-receiver-spoiler__body > .admin-subtitle:first-child {
        margin-top: 0;
    }
    .syslog-hint-box {
        border: 1px solid var(--border); border-radius: 10px;
        background: var(--bg-secondary); padding: 12px 14px;
        color: var(--gray-700); font-size: 13px; margin-bottom: 16px;
    }
    .syslog-receiver-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 8px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
    }
    .syslog-proto-row {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        align-items: center;
        min-height: 44px;
    }
    .syslog-presets {
        display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
    }
    .syslog-preset {
        border: 1px solid var(--border); background: var(--bg-secondary);
        color: var(--gray-700); border-radius: 8px; padding: 6px 10px;
        font-size: 12px; font-weight: 600; cursor: pointer;
    }
    .syslog-preset:hover, .syslog-preset.is-active {
        border-color: var(--primary); color: var(--primary);
        background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    }
    .syslog-sev-chips {
        display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
    }
    .syslog-sev-chip {
        border: 1px solid var(--border); border-radius: 999px;
        padding: 4px 10px; font-size: 12px; font-weight: 600;
        background: var(--bg-secondary); color: var(--gray-700); cursor: pointer;
    }
    .syslog-sev-chip.is-active {
        border-color: var(--primary); color: var(--primary);
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    }
    .syslog-toolbar {
        display: flex; justify-content: space-between; gap: 12px;
        flex-wrap: wrap; align-items: center; margin-bottom: 10px;
    }
    .syslog-clickable { color: var(--primary); text-decoration: underline; cursor: pointer; }
    .syslog-code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px; white-space: pre-wrap; word-break: break-word;
        background: var(--input-bg); border: 1px solid var(--border);
        border-radius: 10px; padding: 12px; margin: 0;
    }
    .syslog-test-os + .syslog-test-os { margin-top: 18px; }
    .syslog-test-os__title {
        margin: 0 0 10px;
        font-size: 13px;
        font-weight: 700;
        color: var(--gray-800);
    }
    .syslog-test-cmd + .syslog-test-cmd { margin-top: 12px; }
    .syslog-test-cmd__head {
        display: flex; justify-content: space-between; gap: 8px;
        align-items: center; margin-bottom: 6px;
    }
    .syslog-test-cmd__head strong { color: var(--gray-800); font-size: 13px; }
    .syslog-test-cmd[hidden], .syslog-test-os[hidden] { display: none !important; }
    @media (max-width: 1100px) {
        .syslog-filters__row--primary,
        .syslog-filters__row--secondary,
        .syslog-filters__row--meta {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 960px) {
        .syslog-kpis { grid-template-columns: 1fr; }
        .syslog-receiver-layout { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
        .syslog-filters__row--primary,
        .syslog-filters__row--secondary,
        .syslog-filters__row--meta {
            grid-template-columns: 1fr;
        }
        .syslog-filters__actions {
            flex-direction: column;
            align-items: stretch;
        }
        .syslog-filters__btns .btn { flex: 1; }
    }
</style>

<div class="syslog-page">
    <div class="syslog-hero">
        <div>
            <h1>Системный журнал</h1>
            <p class="admin-subtitle">Приём и просмотр сообщений syslog от серверов и сетевого оборудования</p>
        </div>
        <div style="display:flex;gap:8px;flex-wrap:wrap;">
            <button type="button" class="btn btn-secondary" id="syslog-refresh-btn">Обновить</button>
            {% if can_export %}
            <button type="button" class="btn btn-secondary" id="syslog-export-csv-btn">Экспорт CSV</button>
            <button type="button" class="btn btn-secondary" id="syslog-export-json-btn">Экспорт JSON</button>
            <button type="button" class="btn btn-secondary" id="syslog-export-pdf-btn">Экспорт PDF</button>
            {% endif %}
        </div>
    </div>

    <div class="syslog-tabs" role="tablist">
        <button type="button" class="syslog-tab is-active" data-tab="journal" role="tab">Журнал</button>
        <button type="button" class="syslog-tab" data-tab="analyze" role="tab">Анализ</button>
        {% if can_manage %}
        <button type="button" class="syslog-tab" data-tab="triggers" role="tab">Триггеры</button>
        <button type="button" class="syslog-tab" data-tab="receiver" role="tab">Приёмник</button>
        {% endif %}
        {% if can_notify %}
        <button type="button" class="syslog-tab" data-tab="notifications" role="tab">Оповещения</button>
        {% endif %}
    </div>

    <div class="syslog-kpis" id="syslog-kpis">
        <div class="syslog-kpi is-off" id="kpi-receiver">
            <div class="syslog-kpi__label">Приёмник</div>
            <div class="syslog-kpi__value" id="kpi-receiver-value">—</div>
            <div class="syslog-kpi__hint" id="kpi-receiver-hint"></div>
        </div>
        <div class="syslog-kpi">
            <div class="syslog-kpi__label">Событий в базе</div>
            <div class="syslog-kpi__value" id="kpi-total">—</div>
            <div class="syslog-kpi__hint" id="kpi-total-hint"></div>
        </div>
        <div class="syslog-kpi">
            <div class="syslog-kpi__label">Принято / отброшено</div>
            <div class="syslog-kpi__value" id="kpi-counts">—</div>
            <div class="syslog-kpi__hint" id="kpi-counts-hint">—</div>
            <div class="syslog-kpi__hint">с момента запуска службы</div>
        </div>
    </div>

    <div class="syslog-panel" id="panel-journal">
        <details class="syslog-filters" id="syslog-filters">
            <summary class="syslog-filters__summary">
                <span class="syslog-filters__summary-title">Фильтры</span>
                <span class="syslog-filters__summary-hint" id="syslog-active-filters">Фильтры не заданы</span>
            </summary>
            <div class="syslog-filters__body">
            <div class="syslog-presets" id="syslog-presets">
                <button type="button" class="syslog-preset" data-preset="1h">Час</button>
                <button type="button" class="syslog-preset" data-preset="24h">Сутки</button>
                <button type="button" class="syslog-preset" data-preset="7d">7 дней</button>
                <button type="button" class="syslog-preset" data-preset="errors">Ошибки и выше</button>
                <button type="button" class="syslog-preset" data-preset="warn">Предупреждения и выше</button>
                <button type="button" class="syslog-preset" data-preset="clear">Сбросить</button>
            </div>
            <div class="syslog-filters__row syslog-filters__row--primary">
                <div class="form-group">
                    <label for="syslog-filter-search">Поиск</label>
                    <input class="form-control" id="syslog-filter-search" type="text" placeholder="Текст, хост, IP…" list="syslog-suggest-search">
                </div>
                <div class="form-group">
                    <label for="syslog-filter-exclude">Исключить текст</label>
                    <input class="form-control" id="syslog-filter-exclude" type="text" placeholder="Не показывать строки с…">
                </div>
                <div class="form-group">
                    <label for="syslog-filter-host">Хост</label>
                    <input class="form-control" id="syslog-filter-host" type="text" list="syslog-suggest-hosts" placeholder="Имя или часть имени">
                </div>
                <div class="form-group">
                    <label for="syslog-filter-source">Источник (IP)</label>
                    <input class="form-control" id="syslog-filter-source" type="text" list="syslog-suggest-sources">
                </div>
                <div class="form-group">
                    <label for="syslog-filter-app">Приложение</label>
                    <input class="form-control" id="syslog-filter-app" type="text" list="syslog-suggest-apps">
                </div>
            </div>
            <div class="syslog-filters__row syslog-filters__row--secondary">
                <div class="form-group">
                    <label for="syslog-filter-msgid">ID сообщения</label>
                    <input class="form-control" id="syslog-filter-msgid" type="text" list="syslog-suggest-msgids">
                </div>
                <div class="form-group">
                    <label for="syslog-filter-procid">ID процесса</label>
                    <input class="form-control" id="syslog-filter-procid" type="text">
                </div>
                <div class="form-group">
                    <label for="syslog-filter-severity">Уровень</label>
                    <select class="form-control" id="syslog-filter-severity"><option value="">Все</option></select>
                </div>
                <div class="form-group">
                    <label for="syslog-filter-severity-max">Не ниже уровня</label>
                    <select class="form-control" id="syslog-filter-severity-max"><option value="">Не задано</option></select>
                </div>
                <div class="form-group">
                    <label for="syslog-filter-facility">Категория</label>
                    <select class="form-control" id="syslog-filter-facility"><option value="">Все</option></select>
                </div>
            </div>
            <div class="syslog-filters__row syslog-filters__row--meta">
                <div class="form-group">
                    <label for="syslog-filter-from">С</label>
                    <input class="form-control" id="syslog-filter-from" type="datetime-local">
                </div>
                <div class="form-group">
                    <label for="syslog-filter-to">По</label>
                    <input class="form-control" id="syslog-filter-to" type="datetime-local">
                </div>
                <div class="form-group">
                    <label for="syslog-filter-order">Сортировка</label>
                    <select class="form-control" id="syslog-filter-order">
                        <option value="desc">Сначала новые</option>
                        <option value="asc">Сначала старые</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="syslog-filter-limit">На странице</label>
                    <select class="form-control" id="syslog-filter-limit">
                        <option value="50">50</option>
                        <option value="100" selected>100</option>
                        <option value="200">200</option>
                        <option value="500">500</option>
                    </select>
                </div>
            </div>
            <div class="syslog-filters__actions">
                <div class="syslog-filters__checks">
                    <label for="syslog-partial-match">
                        <input type="checkbox" id="syslog-partial-match" checked> Частичное совпадение
                    </label>
                </div>
                <div class="syslog-filters__btns">
                    <button type="button" class="btn btn-primary" id="syslog-apply-filters">Применить</button>
                    <button type="button" class="btn btn-secondary" id="syslog-clear-filters">Очистить</button>
                </div>
            </div>
            <datalist id="syslog-suggest-hosts"></datalist>
            <datalist id="syslog-suggest-sources"></datalist>
            <datalist id="syslog-suggest-apps"></datalist>
            <datalist id="syslog-suggest-msgids"></datalist>
            </div>
        </details>
        <div class="syslog-sev-chips-bar">
            <div class="syslog-sev-chips" id="syslog-sev-chips"></div>
        </div>

        <div class="syslog-table-card" style="margin-top:16px;">
            <div class="syslog-toolbar">
                <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                    <span class="admin-subtitle" style="max-width:none;margin:0;">Журнал событий</span>
                    <div class="syslog-view-toggle" role="group" aria-label="Вид журнала">
                        <button type="button" class="is-active" id="syslog-view-stream" data-view="stream">Лента</button>
                        <button type="button" id="syslog-view-table" data-view="table">Таблица</button>
                    </div>
                    <label for="syslog-live" style="display:flex;align-items:center;gap:8px;margin:0;font-weight:500;font-size:14px;">
                        <input type="checkbox" id="syslog-live" checked> Автообновление
                    </label>
                </div>
                <div style="display:flex;gap:8px;flex-wrap:wrap;">
                    <button type="button" class="btn btn-secondary btn-sm" id="syslog-copy-visible" title="Скопировать видимые сообщения">Копировать видимые</button>
                </div>
            </div>
            <div id="syslog-stream" class="syslog-stream" hidden></div>
            <div id="syslog-table-wrap" style="overflow:auto;" hidden>
                <table class="data-table" id="syslog-table">
                    <thead>
                        <tr>
                            <th>Время</th>
                            <th>Уровень</th>
                            <th>Категория</th>
                            <th>Хост</th>
                            <th>Источник</th>
                            <th>Приложение</th>
                            <th>Сообщение</th>
                        </tr>
                    </thead>
                    <tbody id="syslog-tbody"><tr><td colspan="7">Загрузка…</td></tr></tbody>
                </table>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px;flex-wrap:wrap;">
                <span class="admin-subtitle" id="syslog-pager-info"></span>
                <div style="display:flex;gap:8px;">
                    <button type="button" class="btn btn-secondary" id="syslog-prev">Назад</button>
                    <button type="button" class="btn btn-secondary" id="syslog-next">Вперёд</button>
                </div>
            </div>
        </div>
    </div>

    <div class="syslog-panel" id="panel-analyze" hidden>
        <div class="syslog-analyze-toolbar">
            <div class="syslog-analyze-toolbar__head">
                <div>
                    <h3>Анализ журнала хоста</h3>
                    <p class="admin-subtitle" style="margin:6px 0 0;">Оценка риска, эвристики и рекомендации за выбранный период</p>
                </div>
                <div class="syslog-analyze-toolbar__actions">
                    <button type="button" class="btn btn-primary" id="analyze-run-btn">Запустить анализ</button>
                    {% if can_export %}
                    <button type="button" class="btn btn-secondary" id="analyze-download-btn" disabled>Скачать JSON</button>
                    <button type="button" class="btn btn-secondary" id="analyze-download-pdf-btn" disabled>Скачать PDF</button>
                    {% endif %}
                </div>
            </div>
            <div class="syslog-analyze-form">
                <div class="form-group">
                    <label for="analyze-hostname">Хост <span style="color:var(--danger)">*</span></label>
                    <input class="form-control" id="analyze-hostname" type="text" list="syslog-suggest-hosts" placeholder="hostname" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="analyze-from">С</label>
                    <input class="form-control" id="analyze-from" type="datetime-local">
                </div>
                <div class="form-group">
                    <label for="analyze-to">По</label>
                    <input class="form-control" id="analyze-to" type="datetime-local">
                </div>
            </div>
            <div class="syslog-presets" id="analyze-presets">
                <button type="button" class="syslog-preset" data-analyze-preset="1h">Час</button>
                <button type="button" class="syslog-preset" data-analyze-preset="24h">Сутки</button>
                <button type="button" class="syslog-preset" data-analyze-preset="7d">7 дней</button>
                <button type="button" class="syslog-preset" data-analyze-preset="clear">Весь период</button>
            </div>
            <div class="syslog-analyze-status" id="analyze-job-status">Выберите хост и нажмите «Запустить анализ»</div>
        </div>

        <div class="syslog-kpis" id="analyze-kpis" style="margin-top:16px;" hidden>
            <div class="syslog-kpi" id="analyze-kpi-risk">
                <div class="syslog-kpi__label">Оценка риска</div>
                <div class="syslog-kpi__value" id="analyze-risk-score">—</div>
                <div class="syslog-kpi__hint" id="analyze-risk-level"></div>
            </div>
            <div class="syslog-kpi">
                <div class="syslog-kpi__label">Проанализировано</div>
                <div class="syslog-kpi__value" id="analyze-events-count">—</div>
                <div class="syslog-kpi__hint" id="analyze-events-hint"></div>
            </div>
            <div class="syslog-kpi">
                <div class="syslog-kpi__label">Критично / ошибки / предупр.</div>
                <div class="syslog-kpi__value" id="analyze-sev-counts">—</div>
                <div class="syslog-kpi__hint">уровни 0–2 / 3 / 4</div>
            </div>
        </div>

        <div class="syslog-analyze-results" id="analyze-results" hidden>
            <div class="syslog-receiver-card syslog-analyze-span-2">
                <div class="syslog-analyze-card-title"><h3>Причины и рекомендации</h3></div>
                <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;">
                    <div>
                        <div class="admin-subtitle" style="margin:0 0 6px;font-weight:600;color:var(--gray-700);">Причины</div>
                        <ul class="form-hint" id="analyze-reasons" style="margin:0;padding-left:18px;"></ul>
                    </div>
                    <div>
                        <div class="admin-subtitle" style="margin:0 0 6px;font-weight:600;color:var(--gray-700);">Рекомендации</div>
                        <ul class="form-hint" id="analyze-recommendations" style="margin:0;padding-left:18px;"></ul>
                    </div>
                </div>
            </div>
            <div class="syslog-receiver-card syslog-analyze-span-2">
                <div class="syslog-analyze-card-title"><h3>Эвристики</h3></div>
                <div class="syslog-table-scroll">
                    <table class="data-table" id="analyze-heuristics-table">
                        <thead><tr><th>Категория</th><th>Сигнатура</th><th>Источник</th><th>Кол-во</th><th>Пример</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="syslog-receiver-card">
                <div class="syslog-analyze-card-title"><h3>Критичные шаблоны</h3></div>
                <div class="syslog-table-scroll">
                    <table class="data-table" id="analyze-patterns-table">
                        <thead><tr><th>Шаблон</th><th>Уровень</th><th>Кол-во</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="syslog-receiver-card">
                <div class="syslog-analyze-card-title"><h3>Всплески ошибок</h3></div>
                <div class="syslog-table-scroll">
                    <table class="data-table" id="analyze-bursts-table">
                        <thead><tr><th>Интервал</th><th>Ошибки+</th><th>Порог</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="syslog-receiver-card">
                <div class="syslog-analyze-card-title"><h3>Приложения</h3></div>
                <div class="syslog-table-scroll">
                    <table class="data-table" id="analyze-apps-table">
                        <thead><tr><th>Приложение</th><th>Кол-во</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="syslog-receiver-card">
                <div class="syslog-analyze-card-title"><h3>Источники</h3></div>
                <div class="syslog-table-scroll">
                    <table class="data-table" id="analyze-sources-table">
                        <thead><tr><th>IP</th><th>Кол-во</th></tr></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        {% if can_manage %}
        <details class="syslog-patterns-admin" id="analyze-patterns-admin">
            <summary>
                <span class="syslog-filters__summary-title">Свои паттерны анализа</span>
                <span class="syslog-filters__summary-hint" id="analyze-patterns-status">Правила regex поверх встроенных эвристик</span>
            </summary>
            <div class="syslog-patterns-admin__body">
                <div class="syslog-patterns-admin__toolbar">
                    <p class="admin-subtitle" style="margin:0;max-width:none;">Добавляйте сигнатуры под Astra, приложения и локальные форматы логов</p>
                    <button type="button" class="btn btn-primary" id="analyze-pattern-add-btn">Добавить паттерн</button>
                </div>
                <div class="syslog-table-scroll">
                    <table class="data-table" id="analyze-custom-patterns-table">
                        <thead>
                            <tr>
                                <th>Категория</th>
                                <th>Название</th>
                                <th>Идентификатор</th>
                                <th>Важность</th>
                                <th>Вкл.</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <details style="margin-top:12px;">
                    <summary class="admin-subtitle" style="cursor:pointer;max-width:none;">Встроенные сигнатуры (только просмотр)</summary>
                    <div class="syslog-table-scroll" style="margin-top:8px;max-height:240px;">
                        <table class="data-table" id="analyze-builtin-patterns-table">
                            <thead><tr><th>Категория</th><th>Сигнатура</th><th>Важность</th></tr></thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </details>
            </div>
        </details>
        {% endif %}
    </div>

    {% if can_manage %}
    <div class="syslog-panel" id="panel-triggers" hidden>
        <div class="syslog-analyze-toolbar">
            <div class="syslog-analyze-toolbar__head">
                <div>
                    <h3>Триггеры оповещений</h3>
                    <p class="admin-subtitle" style="margin:6px 0 0;max-width:none;">
                        При совпадении regexp с сообщением syslog подписчикам отправляется уведомление
                    </p>
                </div>
                <div class="syslog-analyze-toolbar__actions">
                    <button type="button" class="btn btn-primary" id="syslog-trigger-add-btn">Добавить триггер</button>
                </div>
            </div>
            <p class="form-hint" id="syslog-triggers-status" style="margin:0 0 12px;">—</p>
            <div class="syslog-table-scroll">
                <table class="data-table" id="syslog-triggers-table">
                    <thead>
                        <tr>
                            <th>Название</th>
                            <th>Хост</th>
                            <th>Критичность</th>
                            <th>Cooldown, с</th>
                            <th>Вкл.</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    {% if can_notify %}
    <div class="syslog-panel" id="panel-notifications" hidden>
        <div class="syslog-analyze-toolbar">
            <div class="syslog-analyze-toolbar__head">
                <div>
                    <h3>Личные оповещения</h3>
                    <p class="admin-subtitle" style="margin:6px 0 0;max-width:none;">
                        Подписка на срабатывания триггеров. Канал доставки — в профиле («Оповещения»)
                    </p>
                </div>
            </div>
            <form id="syslog-notify-prefs-form">
                <div class="form-group">
                    <label style="display:flex;align-items:center;gap:8px;font-weight:600;">
                        <input type="checkbox" id="syslog-notify-enabled"> Получать оповещения по триггерам syslog
                    </label>
                </div>
                <div class="form-group">
                    <label for="syslog-notify-scope">Область хостов</label>
                    <select class="form-control" id="syslog-notify-scope">
                        <option value="all">Все хосты</option>
                        <option value="selected">Выбранные хосты</option>
                    </select>
                </div>
                <div class="form-group" id="syslog-notify-hosts-group">
                    <label for="syslog-notify-hosts">Хосты (по одному в строке)</label>
                    <textarea class="form-control" id="syslog-notify-hosts" rows="6" placeholder="web-01&#10;db-01"></textarea>
                    <small class="form-hint">Имена hostname из журнала. Можно подставить из подсказок фильтров.</small>
                </div>
                <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
                    <button type="submit" class="btn btn-primary">Сохранить подписку</button>
                    <button type="button" class="btn btn-secondary" id="syslog-notify-fill-hosts">Подставить известные хосты</button>
                    <span class="form-hint" id="syslog-notify-status">—</span>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    {% if can_manage %}
    <div class="syslog-panel" id="panel-receiver" hidden>
        <form id="syslog-receiver-form">
            <div class="syslog-hint-box">
                Приёмник принимает syslog по UDP/TCP, в том числе от стандартного <strong>rsyslog</strong> на клиентах.
                Отправку событий AWM во <strong>внешний</strong> syslog настраивайте в
                <a href="/settings#settings-spoiler-syslog">Настройки → Внешний syslog</a>.
                Примеры конфигурации клиента — в блоке «Клиент rsyslog» ниже.
            </div>
            <div class="syslog-receiver-layout">
                <div class="syslog-receiver-card">
                    <h3>Приёмник</h3>
                    <p class="admin-subtitle">Адрес, порт и кому разрешено отправлять сообщения</p>
                    <div class="form-group">
                        <label style="display:flex;align-items:center;gap:8px;font-weight:600;">
                            <input type="checkbox" id="cfg-receiver-enabled"> Включить приём сообщений
                        </label>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="cfg-receiver-host">Адрес прослушивания</label>
                            <input class="form-control" id="cfg-receiver-host" type="text" placeholder="0.0.0.0">
                        </div>
                        <div class="form-group">
                            <label for="cfg-receiver-port">Порт</label>
                            <input class="form-control" id="cfg-receiver-port" type="number" min="1" max="65535">
                            <small class="form-hint">По умолчанию 5514 (не требует прав root)</small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Протоколы</label>
                        <div class="syslog-proto-row">
                            <label style="display:flex;align-items:center;gap:8px;font-weight:500;margin:0;">
                                <input type="checkbox" id="cfg-proto-udp" value="udp"> UDP
                            </label>
                            <label style="display:flex;align-items:center;gap:8px;font-weight:500;margin:0;">
                                <input type="checkbox" id="cfg-proto-tcp" value="tcp"> TCP
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cfg-allowed-cidrs">Разрешённые источники (IP или сеть через запятую)</label>
                        <input class="form-control" id="cfg-allowed-cidrs" type="text" placeholder="10.0.0.0/8, 192.168.0.0/16">
                        <small class="form-hint">Сообщения с других адресов отбрасываются</small>
                    </div>
                </div>
                <div class="syslog-receiver-card">
                    <h3>Ограничения и хранение</h3>
                    <p class="admin-subtitle">Защита от перегрузки, срок и объём хранения записей</p>
                    <p class="form-hint" id="cfg-storage-usage" aria-live="polite">Занято: —</p>
                    <div class="form-group">
                        <label for="cfg-max-bytes">Макс. размер одного сообщения</label>
                        <div class="form-row" style="margin:0;">
                            <input class="form-control" id="cfg-max-bytes" type="number" min="1" step="1" value="8">
                            <select class="form-control" id="cfg-max-bytes-unit" title="Единица размера" aria-label="Единица размера">
                                <option value="B">байт</option>
                                <option value="KB" selected>КБ</option>
                                <option value="MB">МБ</option>
                                <option value="GB">ГБ</option>
                            </select>
                        </div>
                        <small class="form-hint" id="cfg-max-bytes-hint">Более длинное сообщение обрезается при приёме. Не ограничивает объём хранилища. Допустимо от 512 байт до 1 ГБ.</small>
                    </div>
                    <div class="form-group">
                        <label for="cfg-rate">Лимит приёма с одного IP, сообщений в секунду</label>
                        <input class="form-control" id="cfg-rate" type="number" min="1">
                        <small class="form-hint">Скорость приёма, а не число хранимых записей.</small>
                    </div>
                    <div class="form-group">
                        <label for="cfg-global-rate">Общий лимит приёма, сообщений в секунду</label>
                        <input class="form-control" id="cfg-global-rate" type="number" min="1">
                        <small class="form-hint">Суммарный потолок приёма со всех источников (защита от перегрузки хранилища).</small>
                    </div>
                    <div class="form-group">
                        <label for="cfg-retention">Хранение, суток</label>
                        <input class="form-control" id="cfg-retention" type="number" min="1" max="3650">
                        <small class="form-hint" id="cfg-retention-hint">Срок применяется к текущему хранилищу журнала (основная БД или ClickHouse: очистка по расписанию и TTL).</small>
                    </div>
                    <div class="form-group">
                        <label for="cfg-max-events">Хранить не более, событий</label>
                        <input class="form-control" id="cfg-max-events" type="number" min="0" max="100000000" step="1" value="0">
                        <small class="form-hint">0 — без ограничения. Сверх лимита удаляются самые старые события (проверка раз в минуту и сразу после сохранения).</small>
                    </div>
                    <div class="form-group">
                        <label for="cfg-max-storage-mb">Хранить не более, МБ</label>
                        <input class="form-control" id="cfg-max-storage-mb" type="number" min="0" max="1048576" step="1" value="0">
                        <small class="form-hint">0 — без ограничения. Учитывается объём данных событий; занятое место на диске освобождается СУБД позже.</small>
                    </div>
                </div>
            </div>
            <details class="syslog-receiver-card syslog-receiver-spoiler" style="margin-top:16px;">
                <summary>
                    <span class="syslog-receiver-spoiler__title">ClickHouse (хранение журнала)</span>
                    <span class="syslog-receiver-spoiler__hint">Опционально при высокой нагрузке</span>
                </summary>
                <div class="syslog-receiver-spoiler__body">
                <p class="admin-subtitle">
                    При высокой нагрузке можно включить отдельное хранилище событий журнала.
                    При включении накопленные записи переносятся; после успешного переноса копии в прежнем хранилище удаляются.
                </p>
                <div class="form-group">
                    <label style="display:flex;align-items:center;gap:8px;font-weight:600;">
                        <input type="checkbox" id="cfg-ch-enabled"> Включить ClickHouse для системного журнала
                    </label>
                </div>
                <div id="cfg-ch-connectivity" class="form-hint" style="margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-secondary);">
                    <div><strong>Доступность:</strong> <span id="cfg-ch-connectivity-text">не проверено</span></div>
                    <div id="cfg-ch-migration-text" style="margin-top:6px;display:none;"></div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="cfg-ch-host">Хост</label>
                        <input class="form-control" id="cfg-ch-host" type="text" value="127.0.0.1">
                    </div>
                    <div class="form-group">
                        <label for="cfg-ch-port">Порт HTTP</label>
                        <input class="form-control" id="cfg-ch-port" type="number" min="1" value="8123">
                    </div>
                    <div class="form-group">
                        <label for="cfg-ch-database">База</label>
                        <input class="form-control" id="cfg-ch-database" type="text" value="awm">
                    </div>
                    <div class="form-group">
                        <label for="cfg-ch-user">Пользователь</label>
                        <input class="form-control" id="cfg-ch-user" type="text" value="default">
                    </div>
                    <div class="form-group">
                        <label for="cfg-ch-password">Пароль</label>
                        <input class="form-control" id="cfg-ch-password" type="password" placeholder="без изменений" autocomplete="new-password">
                    </div>
                </div>
                <div class="form-group">
                    <label style="display:flex;align-items:center;gap:8px;font-weight:500;">
                        <input type="checkbox" id="cfg-ch-secure"> HTTPS / TLS
                    </label>
                </div>
                <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;">
                    <button type="button" class="btn btn-secondary btn-sm" id="cfg-ch-test-btn">Проверить подключение</button>
                    <button type="button" class="btn btn-primary btn-sm" id="cfg-ch-save-btn">Сохранить ClickHouse</button>
                    <span id="cfg-ch-status" class="admin-subtitle" style="margin:0;max-width:none;"></span>
                </div>
                </div>
            </details>
            <details class="syslog-receiver-card syslog-receiver-spoiler" style="margin-top:16px;">
                <summary>
                    <span class="syslog-receiver-spoiler__title">Проверка приёма</span>
                    <span class="syslog-receiver-spoiler__hint">Готовые команды Linux / Windows</span>
                </summary>
                <div class="syslog-receiver-spoiler__body">
                <p class="admin-subtitle">Готовые команды для отправки тестового сообщения на этот приёмник. Хост, порт и протоколы берутся из настроек выше; показываются только команды для включённых протоколов.</p>
                <div id="syslog-test-commands">
                    <div class="syslog-test-os" id="syslog-test-linux" data-os="linux">
                        <h4 class="syslog-test-os__title">Linux (bash)</h4>
                        <div class="syslog-test-cmd" data-proto="tcp" data-cmd="linux-curl-tcp">
                            <div class="syslog-test-cmd__head">
                                <strong>curl (TCP)</strong>
                                <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-linux-curl-tcp">Копировать</button>
                            </div>
                            <pre class="syslog-code" id="syslog-cmd-linux-curl-tcp">Загрузка…</pre>
                        </div>
                        <div class="syslog-test-cmd" data-proto="udp" data-cmd="linux-nc-udp">
                            <div class="syslog-test-cmd__head">
                                <strong>nc (UDP)</strong>
                                <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-linux-nc-udp">Копировать</button>
                            </div>
                            <pre class="syslog-code" id="syslog-cmd-linux-nc-udp">Загрузка…</pre>
                        </div>
                        <div class="syslog-test-cmd" data-proto="tcp" data-cmd="linux-nc-tcp">
                            <div class="syslog-test-cmd__head">
                                <strong>nc (TCP)</strong>
                                <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-linux-nc-tcp">Копировать</button>
                            </div>
                            <pre class="syslog-code" id="syslog-cmd-linux-nc-tcp">Загрузка…</pre>
                        </div>
                    </div>
                    <div class="syslog-test-os" id="syslog-test-windows" data-os="windows">
                        <h4 class="syslog-test-os__title">Windows (PowerShell)</h4>
                        <div class="syslog-test-cmd" data-proto="tcp" data-cmd="windows-curl-tcp">
                            <div class="syslog-test-cmd__head">
                                <strong>curl.exe (TCP)</strong>
                                <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-windows-curl-tcp">Копировать</button>
                            </div>
                            <pre class="syslog-code" id="syslog-cmd-windows-curl-tcp">Загрузка…</pre>
                        </div>
                        <div class="syslog-test-cmd" data-proto="tcp" data-cmd="windows-ps-tcp">
                            <div class="syslog-test-cmd__head">
                                <strong>TcpClient (TCP)</strong>
                                <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-windows-ps-tcp">Копировать</button>
                            </div>
                            <pre class="syslog-code" id="syslog-cmd-windows-ps-tcp">Загрузка…</pre>
                        </div>
                        <div class="syslog-test-cmd" data-proto="udp" data-cmd="windows-ps-udp">
                            <div class="syslog-test-cmd__head">
                                <strong>UdpClient (UDP)</strong>
                                <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-windows-ps-udp">Копировать</button>
                            </div>
                            <pre class="syslog-code" id="syslog-cmd-windows-ps-udp">Загрузка…</pre>
                        </div>
                    </div>
                </div>
                <small class="form-hint" id="syslog-test-note" style="display:block;margin-top:10px;"></small>
                </div>
            </details>
            <details class="syslog-receiver-card syslog-receiver-spoiler" id="syslog-rsyslog-client" style="margin-top:16px;">
                <summary>
                    <span class="syslog-receiver-spoiler__title">Клиент rsyslog</span>
                    <span class="syslog-receiver-spoiler__hint">Примеры для удалённых хостов</span>
                </summary>
                <div class="syslog-receiver-spoiler__body">
                <p class="admin-subtitle" style="max-width:none;">
                    На удалённом хосте достаточно конфигурации ниже и перезапуска служб — без настройки клиента AWM.
                    Сначала включите приём выше (или нажмите «Подготовить приём для rsyslog»), сохраните, затем скопируйте пример на клиент.
                </p>
                <div style="display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;">
                    <button type="button" class="btn btn-secondary btn-sm" id="cfg-rsyslog-preset-btn">Подготовить приём для rsyslog</button>
                </div>
                <div class="form-group">
                    <div class="syslog-test-cmd__head">
                        <strong>UDP (рекомендуется) — /etc/rsyslog.d/awm-forward.conf</strong>
                        <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-rsyslog-udp">Копировать</button>
                    </div>
                    <pre class="syslog-code" id="syslog-cmd-rsyslog-udp"></pre>
                </div>
                <div class="form-group">
                    <div class="syslog-test-cmd__head">
                        <strong>TCP — /etc/rsyslog.d/awm-forward.conf</strong>
                        <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-rsyslog-tcp">Копировать</button>
                    </div>
                    <pre class="syslog-code" id="syslog-cmd-rsyslog-tcp"></pre>
                </div>
                <div class="form-group">
                    <div class="syslog-test-cmd__head">
                        <strong>Установка на клиенте (bash)</strong>
                        <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-rsyslog-apply">Копировать</button>
                    </div>
                    <pre class="syslog-code" id="syslog-cmd-rsyslog-apply"></pre>
                </div>
                <details class="syslog-receiver-spoiler" style="margin-top:8px;border:1px solid var(--border);border-radius:10px;padding:0 12px;">
                    <summary style="cursor:pointer;padding:10px 0;font-weight:600;">
                        systemd journald (ForwardToSyslog)
                    </summary>
                    <div style="padding:0 0 12px;">
                        <div class="syslog-test-cmd__head">
                            <strong>/etc/systemd/journald.conf.d/awm-forward-syslog.conf</strong>
                            <button type="button" class="btn btn-secondary btn-sm" data-copy="#syslog-cmd-rsyslog-journald">Копировать</button>
                        </div>
                        <pre class="syslog-code" id="syslog-cmd-rsyslog-journald"></pre>
                        <small class="form-hint">Без ForwardToSyslog=yes команда logger пишет только в journald, и rsyslog не отправляет сообщения на AWM.</small>
                    </div>
                </details>
                <small class="form-hint" id="syslog-rsyslog-note" style="display:block;margin-top:10px;"></small>
                </div>
            </details>
            <div class="syslog-receiver-card" style="margin-top:16px;">
                <div class="syslog-receiver-actions" style="border-top:none;padding-top:0;margin-top:0;">
                    <div style="display:flex;gap:8px;flex-wrap:wrap;">
                        <button type="button" class="btn btn-secondary" id="cfg-reload-btn">Перезапустить приёмник</button>
                        <button type="button" class="btn btn-danger" id="cfg-purge-ret-btn">Очистить по сроку</button>
                        <button type="button" class="btn btn-danger" id="cfg-purge-all-btn">Очистить всё</button>
                    </div>
                    <button type="submit" class="btn btn-primary">Сохранить</button>
                </div>
                <div id="syslog-receiver-status" class="admin-subtitle" style="margin-top:12px;max-width:none;"></div>
            </div>
        </form>
    </div>
    {% endif %}
</div>

<div id="syslog-event-modal" class="modal">
    <div class="modal-content" style="max-width:900px;">
        <div class="modal-header">
            <h2>Событие журнала</h2>
            <button type="button" class="close-btn" id="syslog-event-close" aria-label="Закрыть">&times;</button>
        </div>
        <div id="syslog-event-meta" class="syslog-event-grid"></div>
        <div class="syslog-event-block-title">Сообщение</div>
        <pre id="syslog-event-msg" class="syslog-event-msg"></pre>
        <div class="syslog-event-block-title">Исходный текст</div>
        <pre id="syslog-event-raw" class="syslog-event-raw"></pre>
        <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap;">
            <button type="button" class="btn btn-secondary" id="syslog-event-copy-msg">Копировать сообщение</button>
            <button type="button" class="btn btn-secondary" id="syslog-event-copy-raw">Копировать raw</button>
            <button type="button" class="btn btn-secondary" id="syslog-event-filter-host">Фильтр по хосту</button>
            <button type="button" class="btn btn-secondary" id="syslog-event-close-2">Закрыть</button>
        </div>
    </div>
</div>

{% if can_manage %}
<div id="analyze-pattern-modal" class="modal">
    <div class="modal-content" style="max-width:640px;">
        <div class="modal-header">
            <h2 id="analyze-pattern-modal-title">Паттерн анализа</h2>
            <button type="button" class="close-btn" id="analyze-pattern-modal-close" aria-label="Закрыть">&times;</button>
        </div>
        <input type="hidden" id="analyze-pattern-id" value="">
        <div class="form-group">
            <label for="analyze-pattern-title">Название <span style="color:var(--danger)">*</span></label>
            <input class="form-control" id="analyze-pattern-title" type="text" maxlength="120">
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="analyze-pattern-category">Категория <span style="color:var(--danger)">*</span></label>
                <input class="form-control" id="analyze-pattern-category" type="text" maxlength="80" placeholder="Например: Свои">
            </div>
            <div class="form-group">
                <label for="analyze-pattern-slug">Идентификатор <span style="color:var(--danger)">*</span></label>
                <input class="form-control" id="analyze-pattern-slug" type="text" maxlength="64" placeholder="my_rule">
                <small class="form-hint">Латиница, цифры и «_»</small>
            </div>
        </div>
        <div class="form-group">
            <label for="analyze-pattern-hint">Важность (0 — критично … 3 — низкая)</label>
            <select class="form-control" id="analyze-pattern-hint">
                <option value="0">0 — критично</option>
                <option value="1">1 — высоко</option>
                <option value="2" selected>2 — средне</option>
                <option value="3">3 — низко</option>
            </select>
        </div>
        <div class="form-group">
            <label for="analyze-pattern-regex">Регулярное выражение <span style="color:var(--danger)">*</span></label>
            <textarea class="form-control" id="analyze-pattern-regex" rows="3" maxlength="500" placeholder="failed password|ошибка аутентификации"></textarea>
        </div>
        <div class="form-group">
            <label for="analyze-pattern-recommendation">Рекомендация</label>
            <textarea class="form-control" id="analyze-pattern-recommendation" rows="2" maxlength="500"></textarea>
        </div>
        <div class="form-group">
            <label style="display:flex;align-items:center;gap:8px;font-weight:600;">
                <input type="checkbox" id="analyze-pattern-enabled" checked> Включён в анализ
            </label>
        </div>
        <div class="admin-subtitle" id="analyze-pattern-modal-error" style="color:var(--danger);max-width:none;"></div>
        <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:16px;">
            <button type="button" class="btn btn-secondary" id="analyze-pattern-modal-cancel">Отмена</button>
            <button type="button" class="btn btn-primary" id="analyze-pattern-modal-save">Сохранить</button>
        </div>
    </div>
</div>
{% endif %}

{% if can_manage %}
<div id="syslog-trigger-modal" class="modal">
    <div class="modal-content" style="max-width:640px;">
        <div class="modal-header">
            <h2 id="syslog-trigger-modal-title">Триггер syslog</h2>
            <button type="button" class="close-btn" id="syslog-trigger-modal-close" aria-label="Закрыть">&times;</button>
        </div>
        <input type="hidden" id="syslog-trigger-id" value="">
        <div class="form-group">
            <label for="syslog-trigger-name">Название <span style="color:var(--danger)">*</span></label>
            <input class="form-control" id="syslog-trigger-name" type="text" maxlength="120">
        </div>
        <div class="form-group">
            <label for="syslog-trigger-pattern">Регулярное выражение <span style="color:var(--danger)">*</span></label>
            <textarea class="form-control" id="syslog-trigger-pattern" rows="3" maxlength="500" placeholder="kernel: Out of memory|OOM killer"></textarea>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="syslog-trigger-hostname">Хост</label>
                <input class="form-control" id="syslog-trigger-hostname" type="text" maxlength="255" list="syslog-suggest-hosts" placeholder="Пусто — все хосты">
            </div>
            <div class="form-group">
                <label for="syslog-trigger-severity">Критичность уведомления</label>
                <select class="form-control" id="syslog-trigger-severity">
                    <option value="info">Информация</option>
                    <option value="warning" selected>Предупреждение</option>
                    <option value="error">Ошибка</option>
                    <option value="critical">Критично</option>
                </select>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label for="syslog-trigger-min-severity">Мин. уровень сообщения (0–7)</label>
                <input class="form-control" id="syslog-trigger-min-severity" type="number" min="0" max="7" placeholder="Не задан">
                <small class="form-hint">Срабатывает, если severity сообщения ≤ значения (0 — аварийный)</small>
            </div>
            <div class="form-group">
                <label for="syslog-trigger-cooldown">Повтор не чаще, сек</label>
                <input class="form-control" id="syslog-trigger-cooldown" type="number" min="0" max="86400" value="300">
            </div>
        </div>
        <div class="form-group">
            <label for="syslog-trigger-title-tpl">Шаблон заголовка</label>
            <input class="form-control" id="syslog-trigger-title-tpl" type="text" maxlength="500" placeholder="HOSTNAME / TRIGGER_NAME">
        </div>
        <div class="form-group">
            <label for="syslog-trigger-msg-tpl">Шаблон сообщения</label>
            <textarea class="form-control" id="syslog-trigger-msg-tpl" rows="2" maxlength="500" placeholder="текст сообщения"></textarea>
            <small class="form-hint">Плейсхолдеры: &#123;&#123;HOSTNAME&#125;&#125;, &#123;&#123;TRIGGER_NAME&#125;&#125;, &#123;&#123;MESSAGE&#125;&#125;, &#123;&#123;SEVERITY&#125;&#125;, &#123;&#123;SOURCE_IP&#125;&#125;, &#123;&#123;LEVEL&#125;&#125;</small>
        </div>
        <div class="form-group">
            <label style="display:flex;align-items:center;gap:8px;font-weight:600;">
                <input type="checkbox" id="syslog-trigger-enabled" checked> Включён
            </label>
        </div>
        <div class="admin-subtitle" id="syslog-trigger-modal-error" style="color:var(--danger);max-width:none;"></div>
        <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:16px;">
            <button type="button" class="btn btn-secondary" id="syslog-trigger-modal-cancel">Отмена</button>
            <button type="button" class="btn btn-primary" id="syslog-trigger-modal-save">Сохранить</button>
        </div>
    </div>
</div>
{% endif %}

<script type="application/json" id="syslog-page-flags">{{ {"can_manage": can_manage, "can_export": can_export, "can_notify": can_notify, "demo_restrictions": demo_restrictions}|tojson }}</script>
<script src="/static/js/syslog.js?v=triggers-1"></script>
{% endblock %}