{% extends "base.html" %}

{% block title %}Релизы агента — мониторинг — AWM{% endblock %}

{% block content %}
<style>
    .mr-page { max-width: 1120px; margin: 0 auto; }
    .mr-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 24px;
        padding: 0;
        background: transparent;
        color: inherit;
        border-bottom: none;
        box-shadow: none;
    }
    .mr-hero__title {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin: 0;
    }
    .mr-hero__icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 6%, transparent));
        color: var(--primary);
        flex-shrink: 0;
    }
    .mr-hero__icon svg { width: 26px; height: 26px; }
    .mr-hero h2 { margin: 0 0 4px; font-size: 1.45rem; font-weight: 700; }
    .mr-hero__sub { margin: 0; font-size: 14px; color: var(--gray-600); max-width: 52rem; line-height: 1.45; }
    .mr-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        color: var(--gray-700);
        border: 1px solid var(--border);
        background: var(--surface);
        transition: background 0.15s, border-color 0.15s;
    }
    .mr-back:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
    .mr-back svg { width: 18px; height: 18px; }
    .mr-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 16px;
        margin-bottom: 20px;
    }
    .mr-panel {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        padding: 18px 20px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }
    .mr-panel__head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
    }
    .mr-panel__head svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }
    .mr-panel__head h3 { margin: 0; font-size: 16px; font-weight: 600; }
    .mr-panel__hint { font-size: 13px; color: var(--gray-600); margin: 0 0 14px; line-height: 1.45; }
    .mr-field-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 16px;
        align-items: end;
    }
    @media (max-width: 520px) {
        .mr-field-grid { grid-template-columns: 1fr; }
    }
    .mr-field {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
    }
    .mr-field > label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 8px;
        line-height: 1.3;
    }
    .mr-page .mr-field .form-control,
    .mr-page .mr-field select.form-control,
    .mr-page .mr-field input.form-control {
        display: block;
        width: 100%;
        min-height: 46px;
        padding: 11px 14px;
        font-size: 15px;
        line-height: 1.35;
        font-family: inherit;
        color: var(--gray-800);
        background: var(--input-bg);
        border: 2px solid var(--border);
        border-radius: 10px;
        box-sizing: border-box;
        transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }
    .mr-page .mr-field select.form-control {
        padding-right: 40px;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 20px;
    }
    .mr-page .mr-field .form-control::placeholder {
        color: var(--gray-500);
        opacity: 1;
    }
    .mr-page .mr-field .form-control:hover {
        border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    }
    .mr-page .mr-field .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
    }
    .mr-file-drop {
        position: relative;
        border: 2px dashed color-mix(in srgb, var(--primary) 35%, var(--border));
        border-radius: 12px;
        padding: 28px 20px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: color-mix(in srgb, var(--primary) 4%, var(--surface));
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
    }
    .mr-file-drop:hover, .mr-file-drop.mr-file-drop--active {
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    }
    .mr-file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .mr-file-drop__icon { color: var(--primary); margin-bottom: 6px; }
    .mr-file-drop__icon svg { width: 28px; height: 28px; }
    .mr-file-drop__text { font-size: 14px; color: var(--gray-600); line-height: 1.45; max-width: 280px; }
    .mr-file-drop__name { font-size: 13px; color: var(--primary); font-weight: 600; margin-top: 8px; min-height: 1.2em; word-break: break-all; }
    .mr-check {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin: 16px 0;
        padding: 12px 14px;
        font-size: 14px;
        line-height: 1.45;
        color: var(--gray-700);
        cursor: pointer;
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface) 90%, var(--border));
        border: 1px solid var(--border);
    }
    .mr-check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary); }
    .mr-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
    }
    .mr-actions .btn {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 14px;
    }
    .mr-actions .btn-sm {
        min-height: 38px;
        padding: 8px 14px;
        font-size: 13px;
    }
    .mr-btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .mr-btn-icon svg { width: 18px; height: 18px; }
    .mr-status { font-size: 13px; color: var(--gray-600); }
    .mr-status--ok { color: #16a34a; }
    .mr-status--err { color: #dc2626; }
    .mr-hosts-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        margin: 18px 0 10px;
    }
    .mr-hosts-toolbar > label {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-700);
    }
    .mr-hosts-chips { display: flex; gap: 6px; flex-wrap: wrap; }
    .mr-hosts-box {
        max-height: 280px;
        overflow: auto;
        border: 2px solid var(--border);
        border-radius: 12px;
        background: var(--input-bg);
        padding: 8px;
    }
    .mr-host-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        margin: 2px 0;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.12s;
    }
    .mr-host-row:hover:not(.mr-host-row--disabled) { background: color-mix(in srgb, var(--primary) 7%, transparent); }
    .mr-host-row--disabled { opacity: 0.5; cursor: not-allowed; }
    .mr-host-row input { margin-top: 4px; accent-color: var(--primary); }
    .mr-host-row__body { flex: 1; min-width: 0; }
    .mr-host-row__title { font-weight: 600; font-size: 14px; }
    .mr-host-row__meta { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
    .mr-host-row__warn { font-size: 12px; color: #b45309; margin-top: 4px; display: none; }
    .mr-host-row--downgrade .mr-host-row__warn { display: block; }
    .mr-alert {
        display: none;
        margin-bottom: 12px;
        padding: 12px 14px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.45;
        border-left: 3px solid #d97706;
        background: color-mix(in srgb, #d97706 10%, transparent);
    }
    .mr-alert--visible { display: block; }
    .mr-alert ul { margin: 8px 0 0 18px; padding: 0; }
    .mr-section { margin-top: 28px; }
    .mr-section__head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
    }
    .mr-section__head svg { width: 22px; height: 22px; color: var(--primary); }
    .mr-section__head h3 { margin: 0; font-size: 17px; font-weight: 600; }
    .mr-releases-grid { display: grid; gap: 12px; }
    .mr-release-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px 16px;
        background: var(--surface);
    }
    .mr-release-card__top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .mr-release-card__title { font-weight: 600; font-size: 15px; }
    .mr-release-card__tag {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        color: var(--gray-600);
        margin-top: 2px;
    }
    .mr-plat-list { list-style: none; margin: 0; padding: 0; }
    .mr-plat-list li {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0;
        border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
        font-size: 13px;
    }
    .mr-plat-list li:first-child { border-top: none; padding-top: 0; }
    .mr-dl-link { max-width: 100%; white-space: normal; text-align: left; line-height: 1.35; }
    .mr-latest-badge {
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        text-transform: lowercase;
        letter-spacing: 0.02em;
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 14%, transparent);
        vertical-align: middle;
    }
    .mr-release-card--latest {
        border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
    }
    .mr-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .mr-badge--linux { background: color-mix(in srgb, #0ea5e9 14%, transparent); color: #0369a1; }
    .mr-badge--windows { background: color-mix(in srgb, #6366f1 14%, transparent); color: #4338ca; }
    .mr-empty {
        padding: 32px 20px;
        text-align: center;
        color: var(--gray-600);
        border: 1px dashed var(--border);
        border-radius: 12px;
        font-size: 14px;
    }
    .mr-jobs-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
        font-size: 13px;
        color: var(--gray-600);
    }
    .mr-jobs-summary__chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface) 92%, var(--border));
        border: 1px solid var(--border);
    }
    .mr-jobs-summary__chip strong { color: var(--gray-800); font-weight: 600; }
    .mr-jobs-scroll {
        max-height: min(520px, 58vh);
        overflow-y: auto;
        overflow-x: hidden;
        border: 2px solid var(--border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--input-bg) 40%, var(--surface));
        padding: 10px;
        scroll-behavior: smooth;
    }
    .mr-jobs-scroll::-webkit-scrollbar { width: 8px; }
    .mr-jobs-scroll::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--primary) 35%, var(--gray-400));
        border-radius: 4px;
    }
    .mr-jobs-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .mr-jobs-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
        font-size: 13px;
        color: var(--gray-600);
    }
    .mr-jobs-footer .btn { min-height: 38px; }
    .mr-job-card {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        padding: 0;
        overflow: hidden;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .mr-job-card:hover {
        border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    }
    .mr-job-card__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px 16px;
        padding: 14px 16px;
        align-items: start;
    }
    @media (max-width: 640px) {
        .mr-job-card__body { grid-template-columns: 1fr; }
    }
    .mr-job-card__head {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
    }
    .mr-job-card__id {
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 700;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        color: var(--gray-500);
        background: color-mix(in srgb, var(--border) 40%, transparent);
        padding: 6px 10px;
        border-radius: 8px;
        line-height: 1;
    }
    .mr-job-card__host { min-width: 0; }
    .mr-job-card__name {
        font-size: 15px;
        font-weight: 600;
        color: var(--gray-800);
        margin: 0 0 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mr-job-card__meta-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--gray-600);
    }
    .mr-job-card__version {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 6px;
        background: color-mix(in srgb, var(--primary) 10%, transparent);
        color: var(--primary);
        font-weight: 600;
    }
    .mr-job-card__side {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }
    .mr-job-card__time {
        font-size: 12px;
        color: var(--gray-500);
        text-align: right;
        white-space: nowrap;
    }
    .mr-job-card__time span { display: block; color: var(--gray-600); font-size: 11px; margin-top: 2px; }
    .mr-job-card__source {
        font-size: 12px;
        color: var(--gray-600);
        padding: 0 16px 12px;
        margin-top: -4px;
    }
    .mr-job-card__source code {
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--border) 50%, transparent);
    }
    .mr-job-card__error {
        margin: 0 16px 14px;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.45;
        color: #b91c1c;
        background: color-mix(in srgb, #dc2626 10%, transparent);
        border: 1px solid color-mix(in srgb, #dc2626 25%, transparent);
    }
    [data-theme="dark"] .mr-job-card__error,
    [data-theme="violet"] .mr-job-card__error,
    [data-theme="gothic"] .mr-job-card__error {
        color: #fca5a5;
    }
    .mr-jobs-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
        align-items: center;
    }
    .mr-jobs-toolbar__hint {
        font-size: 12px;
        color: var(--gray-600);
        flex: 1 1 200px;
        min-width: 0;
        line-height: 1.4;
    }
    .mr-job-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
    }
    .mr-job-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        padding: 6px 12px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--gray-700);
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .mr-job-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 8%, var(--input-bg));
    }
    .mr-job-btn--primary {
        border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
        background: color-mix(in srgb, var(--primary) 14%, transparent);
        color: var(--primary);
    }
    .mr-job-btn--danger:hover {
        border-color: #dc2626;
        color: #dc2626;
        background: color-mix(in srgb, #dc2626 10%, transparent);
    }
    .mr-job-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
    .mr-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }
    .mr-status-pill::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.85;
    }
    .mr-status-pill--pending, .mr-status-pill--sent {
        background: color-mix(in srgb, var(--primary) 18%, transparent);
        color: var(--primary);
    }
    .mr-status-pill--running {
        background: color-mix(in srgb, #d97706 18%, transparent);
        color: #d97706;
    }
    .mr-status-pill--paused {
        background: color-mix(in srgb, var(--gray-500) 20%, transparent);
        color: var(--gray-600);
    }
    .mr-status-pill--success {
        background: color-mix(in srgb, #16a34a 18%, transparent);
        color: #16a34a;
    }
    .mr-status-pill--failed {
        background: color-mix(in srgb, #dc2626 18%, transparent);
        color: #dc2626;
    }
    .mr-status-pill--cancelled {
        background: color-mix(in srgb, var(--gray-500) 16%, transparent);
        color: var(--gray-500);
    }
    #mr-toast-stack {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 12000;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: min(420px, calc(100vw - 32px));
        pointer-events: none;
    }
    #mr-toast-stack .live-notification-toast { pointer-events: auto; cursor: pointer; }
</style>

<div class="mr-page">
    <header class="mr-hero">
        <div class="mr-hero__title">
            <div class="mr-hero__icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 8h-3V4H7v4H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM7 6h10V4H7v2zm5 14c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>
            </div>
            <div>
                <h2>Релизы AWM Agent</h2>
                <p class="mr-hero__sub">Релизы хранятся в <code>down-agent/</code>. Для установки на хост скачайте <strong>пакет установки</strong> (скрипт + бинарник + инструкция) или только <strong>бинарник</strong> для замены в существующей установке.</p>
            </div>
        </div>
        <a href="/monitoring" class="mr-back">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
            К мониторингу
        </a>
    </header>

    <div class="mr-grid">
        <section class="mr-panel">
            <div class="mr-panel__head">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v-2h4v-4h2v4h4v2zm-8-6H5v14h2v-4h6v-2h-6v-2h6V9H5V7z"/></svg>
                <h3>Загрузить релиз</h3>
            </div>
            <p class="mr-panel__hint">Сохранение в постоянный каталог <code>down-agent</code> для ручной установки и обновления на хостах. Платформа и версия определяются из имени файла, например <code>awm-agent-binaries-linux-1.8.10.tar.gz</code>.</p>
            <form id="mr-upload-form">
                <div class="mr-field">
                    <label>Архив бинарников или отдельный файл</label>
                    <div class="mr-file-drop" id="mr-file-drop">
                        <input type="file" id="mr-file" required>
                        <div class="mr-file-drop__icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
                        </div>
                        <div class="mr-file-drop__text">Перетащите файл или нажмите для выбора</div>
                        <div class="mr-file-drop__name" id="mr-file-name"></div>
                    </div>
                </div>
                <div class="mr-field-grid">
                    <div class="mr-field">
                        <label for="mr-platform">Платформа</label>
                        <select id="mr-platform" class="form-control mr-input">
                            <option value="">— определится из файла —</option>
                            <option value="linux">Linux</option>
                            <option value="windows">Windows</option>
                            <option value="darwin-arm64">macOS Apple Silicon</option>
                            <option value="darwin-amd64">macOS Intel</option>
                        </select>
                    </div>
                    <div class="mr-field">
                        <label for="mr-version">Версия</label>
                        <input type="text" id="mr-version" class="form-control mr-input" placeholder="1.8.10" autocomplete="off">
                    </div>
                </div>
                <p id="mr-upload-detected" class="form-hint" style="margin:0 0 12px;"></p>
                <label class="mr-check">
                    <input type="checkbox" id="mr-replace-old">
                    <span>После успешной загрузки удалить предыдущий релиз этой платформы</span>
                </label>
                <div class="mr-actions">
                    <button type="submit" class="btn btn-primary mr-btn-icon">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
                        Загрузить
                    </button>
                    <span id="mr-upload-status" class="mr-status"></span>
                </div>
            </form>
        </section>

        <section class="mr-panel">
            <div class="mr-panel__head">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                <h3>Скачать для установки</h3>
            </div>
            <p class="mr-panel__hint">Скачивается <strong>пакет установки</strong> последнего релиза: скрипт, инструкция и бинарник (без config.yaml). Распакуйте на хосте и выполните скрипт установки. При обновлении сохраните свой <code>config.yaml</code>.</p>
            <p id="mr-latest-label" class="mr-status" style="margin-bottom:12px;">Загрузка…</p>
            <div class="mr-actions">
                <button type="button" class="btn btn-primary mr-btn-icon" id="mr-download-latest-linux" disabled
                    title="Скрипт install-linux.sh, INSTALL.txt и бинарник агента в архиве .tar.gz">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                    Пакет установки — Linux
                </button>
                <button type="button" class="btn btn-primary mr-btn-icon" id="mr-download-latest-windows" disabled
                    title="Скрипт install-windows.ps1, INSTALL.txt и бинарник агента в архиве .zip">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                    Пакет установки — Windows
                </button>
                <button type="button" class="btn btn-primary mr-btn-icon" id="mr-download-latest-darwin-arm64" disabled
                    title="Скрипт install-macos.sh и бинарник Apple Silicon">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                    Пакет установки — macOS Apple Silicon
                </button>
                <button type="button" class="btn btn-primary mr-btn-icon" id="mr-download-latest-darwin-amd64" disabled
                    title="Скрипт install-macos.sh и бинарник Intel">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
                    Пакет установки — macOS Intel
                </button>
            </div>
        </section>
    </div>

    <section class="mr-section">
        <div class="mr-section__head">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9.5l2.5 3.01L15.5 11l-4.5 6H20V11z"/></svg>
            <h3>Установленные релизы</h3>
        </div>
        <div id="mr-releases-loading" class="loading">Загрузка…</div>
        <div id="mr-releases-list" class="mr-releases-grid"></div>
    </section>
</div>

<div id="mr-toast-stack" aria-live="polite" aria-atomic="true"></div>
{% endblock %}

{% block scripts %}
<script src="/static/js/monitoring_releases.js?v=20260824a"></script>
{% endblock %}