{% 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-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>
        {% if can_manage %}
        <button type="button" class="syslog-tab" data-tab="receiver" 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">с момента запуска службы</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-live">
                        <input type="checkbox" id="syslog-live" checked> Автообновление
                    </label>
                    <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>
                </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>

    {% if can_manage %}
    <div class="syslog-panel" id="panel-receiver" hidden>
        <form id="syslog-receiver-form">
            <div class="syslog-hint-box">
                Приёмник принимает syslog по UDP/TCP. Отправку событий AWM во <strong>внешний</strong> syslog настраивайте в
                <a href="/settings#settings-spoiler-syslog">Настройки → Внешний syslog</a>.
            </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>
                    <div class="form-group">
                        <label for="cfg-max-bytes">Макс. размер сообщения, байт</label>
                        <input class="form-control" id="cfg-max-bytes" type="number" min="512" max="65535">
                    </div>
                    <div class="form-group">
                        <label for="cfg-rate">Лимит сообщений/с с одного IP</label>
                        <input class="form-control" id="cfg-rate" type="number" min="1">
                    </div>
                    <div class="form-group">
                        <label for="cfg-retention">Хранение, суток</label>
                        <input class="form-control" id="cfg-retention" type="number" min="1" max="3650">
                    </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">
                    При высокой нагрузке события можно хранить в ClickHouse (отдельно от мониторинга).
                    При включении выполняется перенос из основной БД; после успеха записи в основной БД удаляются.
                </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>
            <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" hidden>
    <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>

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