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

{% block title %}Главная · AWM{% endblock %}

{% block extra_head %}
<style>
    .home-page {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    @keyframes homeFadeUp {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .home-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 16px;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: linear-gradient(100deg,
            color-mix(in srgb, var(--primary) 7%, var(--surface)) 0%,
            var(--surface) 55%);
        box-shadow: 0 2px 10px color-mix(in srgb, var(--gray-900) 4%, transparent);
        animation: homeFadeUp 0.45s ease both;
        box-sizing: border-box;
    }
    .home-hero-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
        min-width: 0;
    }
    .home-hero h1 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 750;
        color: var(--gray-900);
        letter-spacing: -0.02em;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .home-hero-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .home-hero-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        padding: 0 10px;
        border-width: 1px;
        border-style: solid;
        border-radius: 6px;
        box-sizing: border-box;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        box-shadow: none;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .home-hero-actions .btn:hover {
        transform: none;
        text-decoration: none;
    }
    .home-hero-actions .btn .nav-icon {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }
    .home-hero-actions .btn span {
        white-space: nowrap;
        line-height: 1;
    }

    .home-hero-aside {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        min-width: 0;
    }
    .home-chip,
    .home-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 80%, var(--bg-secondary));
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--gray-600);
        white-space: nowrap;
        line-height: 1.2;
        box-sizing: border-box;
    }
    .home-badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gray-400);
        flex-shrink: 0;
    }
    .home-badge.ok {
        border-color: color-mix(in srgb, var(--success) 38%, var(--border));
        background: color-mix(in srgb, var(--success) 12%, var(--surface));
        color: color-mix(in srgb, var(--success) 40%, var(--gray-900));
    }
    .home-badge.ok .home-badge-dot {
        background: var(--success);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
    }
    .home-badge.warn {
        border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
        background: color-mix(in srgb, var(--warning) 12%, var(--surface));
        color: color-mix(in srgb, var(--warning) 40%, var(--gray-900));
    }
    .home-badge.warn .home-badge-dot { background: var(--warning); }
    .home-chip-clock {
        font-size: 0.78rem;
        color: var(--gray-700);
        font-variant-numeric: tabular-nums;
        cursor: default;
    }
    .home-chip-clock .home-clock-time {
        font-weight: 750;
        color: var(--gray-900);
    }
    .home-chip-user {
        max-width: 280px;
        padding-left: 3px;
        font-size: 0.78rem;
        color: var(--gray-800);
        cursor: default;
    }
    .home-chip-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        font-size: 0.6rem;
        font-weight: 750;
        color: color-mix(in srgb, var(--primary) 80%, var(--gray-900));
        background: color-mix(in srgb, var(--primary) 16%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    }
    .home-chip-name {
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .home-chip-role {
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        font-size: 0.66rem;
        font-weight: 700;
        color: var(--gray-700);
    }
    .home-chip-role.is-admin {
        border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
        color: color-mix(in srgb, var(--primary) 65%, var(--gray-900));
    }

    .home-charts-head-actions {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .home-period-switch {
        display: inline-flex;
        gap: 4px;
    }
    .home-period-switch .btn {
        height: 26px;
        padding: 0 9px;
        font-size: 0.74rem;
        line-height: 1;
        border-radius: 6px;
    }
    .home-charts-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        animation: homeFadeUp 0.5s ease 0.1s both;
    }
    .home-chart-card {
        --home-chart-accent: var(--primary);
        position: relative;
        overflow: hidden;
        border: 1px solid var(--border);
        border-top: 3px solid var(--home-chart-accent);
        border-radius: 12px;
        background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--home-chart-accent) 6%, var(--surface)) 0%,
                var(--surface) 38%);
        padding: 12px 16px 14px;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--gray-900) 4%, transparent);
        box-sizing: border-box;
        min-width: 0;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .home-chart-card:hover {
        border-color: color-mix(in srgb, var(--home-chart-accent) 35%, var(--border));
        border-top-color: var(--home-chart-accent);
        box-shadow: 0 6px 18px color-mix(in srgb, var(--gray-900) 7%, transparent);
    }
    .home-chart-card.accent-success { --home-chart-accent: var(--success); }
    .home-chart-card.accent-danger { --home-chart-accent: var(--danger); }
    .home-chart-card.accent-warning { --home-chart-accent: var(--warning); }
    .home-chart-card.accent-muted { --home-chart-accent: var(--gray-400); }
    .home-chart-card.is-wide,
    .home-chart-card.is-fill { grid-column: 1 / -1; }
    .home-chart-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }
    .home-chart-head h3 {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--gray-900);
    }
    .home-chart-head h3::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--home-chart-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-chart-accent) 20%, transparent);
        flex-shrink: 0;
    }
    .home-chart-hint {
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg-secondary) 60%, var(--surface));
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        white-space: nowrap;
    }
    .home-chart-hint:empty { display: none; }
    .home-chart-body {
        position: relative;
        height: 240px;
    }
    .home-chart-card.is-wide .home-chart-body { height: 270px; }
    .home-chart-card.is-fill .home-chart-body { height: 260px; }
    .home-chart-body .home-empty {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .home-chart-body.is-empty canvas { visibility: hidden; }
    .home-chart-body.is-empty .home-empty { display: flex; }

    .home-section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 4px 0 0;
        animation: homeFadeUp 0.5s ease 0.05s both;
    }
    .home-section-label {
        margin: 0;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--gray-500);
    }
    .home-section-hint {
        font-size: 0.74rem;
        color: var(--gray-400);
    }

    .home-kpi-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        animation: homeFadeUp 0.5s ease 0.08s both;
    }
    .home-kpi {
        position: relative;
        overflow: hidden;
        border: 1px solid var(--border);
        border-top: 3px solid var(--home-kpi-accent, var(--primary));
        border-radius: 12px;
        background: var(--surface);
        padding: 14px 14px 12px;
        min-height: 108px;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--gray-900) 4%, transparent);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        box-sizing: border-box;
    }
    .home-kpi:hover {
        border-color: color-mix(in srgb, var(--home-kpi-accent, var(--primary)) 35%, var(--border));
        border-top-color: var(--home-kpi-accent, var(--primary));
        box-shadow: 0 6px 18px color-mix(in srgb, var(--gray-900) 7%, transparent);
    }
    .home-kpi-uptime { --home-kpi-accent: var(--primary); }
    .home-kpi-runs { --home-kpi-accent: color-mix(in srgb, var(--primary) 55%, var(--success)); }
    .home-kpi-success { --home-kpi-accent: var(--success); }
    .home-kpi-active { --home-kpi-accent: var(--warning); }
    .home-kpi-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
    }
    .home-kpi-label {
        font-size: 0.72rem;
        font-weight: 650;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--gray-500);
    }
    .home-kpi-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: color-mix(in srgb, var(--home-kpi-accent, var(--primary)) 14%, var(--surface));
        color: color-mix(in srgb, var(--home-kpi-accent, var(--primary)) 72%, var(--gray-800));
        border: 1px solid color-mix(in srgb, var(--home-kpi-accent, var(--primary)) 22%, var(--border));
    }
    .home-kpi-icon .nav-icon { width: 15px; height: 15px; }
    .home-kpi-value {
        font-size: 1.5rem;
        font-weight: 750;
        line-height: 1.1;
        color: var(--gray-900);
        margin-bottom: 6px;
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
    }
    .home-kpi-note {
        margin: 0;
        font-size: 0.74rem;
        color: var(--gray-500);
        line-height: 1.35;
    }
    .home-kpi-value.home-loading { opacity: 0.35; }
    .home-progress {
        margin-top: 10px;
        height: 5px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--border) 75%, var(--bg-secondary));
        overflow: hidden;
    }
    .home-progress > span {
        display: block;
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 55%, var(--primary)));
        transition: width 0.5s ease;
    }

    .home-panel {
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        padding: 16px;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--gray-900) 4%, transparent);
        animation: homeFadeUp 0.55s ease 0.12s both;
        box-sizing: border-box;
        width: 100%;
    }
    .home-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
    }
    .home-panel h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-900);
        letter-spacing: -0.015em;
    }
    .home-panel-meta {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--primary);
        text-decoration: none;
    }
    a.home-panel-meta:hover {
        color: var(--primary-dark);
        text-decoration: none;
    }
    .home-list {
        display: grid;
        gap: 8px;
    }
    .home-empty {
        padding: 16px 14px;
        text-align: center;
        color: var(--gray-500);
        font-size: 0.84rem;
        border: 1px dashed var(--border);
        border-radius: 10px;
        background: color-mix(in srgb, var(--bg-secondary) 55%, var(--surface));
    }
    .home-run-item {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        align-items: start;
        padding: 12px 14px 12px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--bg-secondary) 45%, var(--surface));
        text-decoration: none;
        color: inherit;
        position: relative;
        overflow: hidden;
        transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
    }
    .home-run-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--gray-300);
    }
    .home-run-item.is-success::before { background: var(--success); }
    .home-run-item.is-failed::before { background: var(--danger); }
    .home-run-item.is-running::before,
    .home-run-item.is-pending::before { background: var(--primary); }
    .home-run-item.is-cancelled::before,
    .home-run-item.is-other::before { background: var(--gray-400); }
    a.home-run-item:hover {
        border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
        background: color-mix(in srgb, var(--primary) 5%, var(--surface));
        text-decoration: none;
        transform: translateY(-1px);
    }
    .home-run-title {
        font-size: 0.88rem;
        font-weight: 650;
        color: var(--gray-900);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .home-run-meta {
        grid-column: 1 / -1;
        font-size: 0.74rem;
        color: var(--gray-500);
    }
    .home-status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 9px;
        border-radius: 999px;
        border: 1px solid transparent;
        font-size: 0.68rem;
        font-weight: 700;
        white-space: nowrap;
    }
    .home-status-pill.success {
        background: color-mix(in srgb, var(--success) 14%, var(--surface));
        color: color-mix(in srgb, var(--success) 42%, var(--gray-900));
        border-color: color-mix(in srgb, var(--success) 32%, var(--border));
    }
    .home-status-pill.failed {
        background: color-mix(in srgb, var(--danger) 12%, var(--surface));
        color: color-mix(in srgb, var(--danger) 48%, var(--gray-900));
        border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
    }
    .home-status-pill.running,
    .home-status-pill.pending {
        background: color-mix(in srgb, var(--primary) 12%, var(--surface));
        color: color-mix(in srgb, var(--primary) 52%, var(--gray-900));
        border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
    }
    .home-status-pill.cancelled,
    .home-status-pill.other {
        background: color-mix(in srgb, var(--gray-400) 14%, var(--surface));
        color: var(--gray-600);
        border-color: var(--border);
    }

    @media (max-width: 980px) {
        .home-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .home-charts-grid { grid-template-columns: 1fr; }
        .home-hero-aside { justify-content: flex-start; }
    }
    @media (max-width: 560px) {
        .home-page { gap: 12px; }
        .home-kpi-grid { grid-template-columns: 1fr; }
        .home-chip-user { max-width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
        .home-charts-grid,
        .home-kpi,
        .home-run-item,
        .home-hero,
        .home-kpi-grid,
        .home-panel,
        .home-section-head,
        .home-hero-actions .btn {
            animation: none !important;
            transition: none !important;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="home-page">
    <section class="home-hero" aria-labelledby="home-greeting">
        <div class="home-hero-main">
            <h1 id="home-greeting">Сводка</h1>
            <div class="home-hero-actions">
                <a class="btn btn-primary" href="/ansible">
                    {{ nav_icon('playbooks') }}
                    <span>Раздел Ansible</span>
                </a>
                {% if home_summary and home_summary.modules %}
                    {% for module in home_summary.modules if module.id == 'monitoring' and module.allowed %}
                    <a class="btn btn-secondary" href="/monitoring">
                        {{ nav_icon('monitoring') }}
                        <span>Мониторинг</span>
                    </a>
                    {% endfor %}
                    {% for module in home_summary.modules if module.id == 'asset_inventory' and module.allowed %}
                    <a class="btn btn-secondary" href="/asset-inventory">
                        {{ nav_icon('asset_inventory') }}
                        <span>Учёт активов</span>
                    </a>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
        <aside class="home-hero-aside" aria-label="Сессия">
            {% if home_summary %}
            <span class="home-chip home-chip-clock" title="{% if home_summary.timezone %}Часовой пояс профиля: {{ home_summary.timezone }}{% else %}Время браузера (пояс в профиле не задан){% endif %}">
                <span class="home-clock-time" id="home-clock-time">—:—</span>
                <span id="home-clock-date">дата</span>
            </span>
            <span class="home-chip home-chip-user" title="{{ home_summary.display_name }}{% if home_summary.username %} (@{{ home_summary.username }}){% endif %}">
                <span class="home-chip-avatar" aria-hidden="true">{{ home_summary.initials }}</span>
                <span class="home-chip-name">{{ home_summary.display_name }}</span>
                <span class="home-chip-role{% if home_summary.is_admin %} is-admin{% endif %}">{{ home_summary.level }}</span>
            </span>
            {% endif %}
            <span class="home-badge" id="home-service-badge">
                <span class="home-badge-dot" aria-hidden="true"></span>
                <span id="home-service-badge-text">Сервис</span>
            </span>
            <span class="home-badge" id="home-refresh-badge">Обновление…</span>
        </aside>
    </section>

    <div class="home-section-head">
        <p class="home-section-label">Ключевые показатели</p>
        <span class="home-section-hint">обновляется автоматически</span>
    </div>
    <section class="home-kpi-grid" aria-label="KPI">
        <article class="home-kpi home-kpi-uptime">
            <div class="home-kpi-top">
                <span class="home-kpi-label">Uptime</span>
                <span class="home-kpi-icon" aria-hidden="true">{{ nav_icon('statistics') }}</span>
            </div>
            <div class="home-kpi-value home-loading" id="home-uptime">—</div>
            <p class="home-kpi-note">Непрерывная работа сервиса</p>
        </article>
        <article class="home-kpi home-kpi-runs">
            <div class="home-kpi-top">
                <span class="home-kpi-label">Запуски Ansible</span>
                <span class="home-kpi-icon" aria-hidden="true">{{ nav_icon('playbooks') }}</span>
            </div>
            <div class="home-kpi-value home-loading" id="home-runs-total">—</div>
            <p class="home-kpi-note">Всего в доступной истории</p>
        </article>
        <article class="home-kpi home-kpi-success">
            <div class="home-kpi-top">
                <span class="home-kpi-label">Успех / ошибки</span>
                <span class="home-kpi-icon" aria-hidden="true">{{ nav_icon('commands') }}</span>
            </div>
            <div class="home-kpi-value home-loading" id="home-runs-success-fail">—</div>
            <p class="home-kpi-note" id="home-success-rate">—</p>
            <div class="home-progress" aria-hidden="true"><span id="home-success-bar"></span></div>
        </article>
        <article class="home-kpi home-kpi-active">
            <div class="home-kpi-top">
                <span class="home-kpi-label">Активные задачи</span>
                <span class="home-kpi-icon" aria-hidden="true">{{ nav_icon('plugin') }}</span>
            </div>
            <div class="home-kpi-value home-loading" id="home-runs-active">—</div>
            <p class="home-kpi-note" id="home-active-note">В очереди и выполняются</p>
        </article>
    </section>

    {% set home_is_admin = home_summary.is_admin if home_summary else false %}
    <div class="home-section-head">
        <p class="home-section-label">Состояние {% if home_is_admin %}системы{% else %}ваших данных{% endif %}</p>
        <span class="home-charts-head-actions">
            <span class="home-section-hint">{% if home_is_admin %}по всей системе{% else %}по вашим данным{% endif %}</span>
            <span class="home-period-switch" role="group" aria-label="Период">
                <button type="button" class="btn btn-secondary" data-home-period="7">7 дн.</button>
                <button type="button" class="btn btn-primary" data-home-period="14">14 дн.</button>
                <button type="button" class="btn btn-secondary" data-home-period="30">30 дн.</button>
            </span>
        </span>
    </div>
    <section class="home-charts-grid" id="home-charts" aria-label="Графики">
        <article class="home-chart-card is-wide accent-success">
            <div class="home-chart-head"><h3>Запуски по дням</h3><span class="home-chart-hint" id="home-chart-runs-hint"></span></div>
            <div class="home-chart-body"><canvas id="home-chart-runs-daily"></canvas><div class="home-empty">Нет данных за период</div></div>
        </article>
        <article class="home-chart-card">
            <div class="home-chart-head"><h3>Статусы запусков</h3></div>
            <div class="home-chart-body"><canvas id="home-chart-runs-status"></canvas><div class="home-empty">Нет данных за период</div></div>
        </article>
        <article class="home-chart-card accent-danger">
            <div class="home-chart-head"><h3>Плейбуки с ошибками</h3></div>
            <div class="home-chart-body"><canvas id="home-chart-top-failed"></canvas><div class="home-empty">Ошибок за период нет</div></div>
        </article>
        <article class="home-chart-card accent-warning" id="home-chart-card-monitoring" hidden>
            <div class="home-chart-head"><h3>Мониторинг</h3><span class="home-chart-hint">агенты сейчас</span></div>
            <div class="home-chart-body"><canvas id="home-chart-monitoring"></canvas><div class="home-empty">Агенты не подключены</div></div>
        </article>
        <article class="home-chart-card">
            <div class="home-chart-head"><h3>Ресурсы</h3></div>
            <div class="home-chart-body"><canvas id="home-chart-resources"></canvas><div class="home-empty">Нет данных</div></div>
        </article>
        <article class="home-chart-card accent-muted" id="home-chart-card-terraform" hidden>
            <div class="home-chart-head"><h3>Terraform</h3><span class="home-chart-hint">запуски за период</span></div>
            <div class="home-chart-body"><canvas id="home-chart-terraform"></canvas><div class="home-empty">Нет данных за период</div></div>
        </article>
        {% if home_is_admin %}
        <article class="home-chart-card" id="home-chart-card-users">
            <div class="home-chart-head"><h3>Активность пользователей</h3><span class="home-chart-hint">запуски за период</span></div>
            <div class="home-chart-body"><canvas id="home-chart-top-users"></canvas><div class="home-empty">Нет данных за период</div></div>
        </article>
        <article class="home-chart-card" id="home-chart-card-system">
            <div class="home-chart-head"><h3>Пользователи и система</h3><span class="home-chart-hint" id="home-chart-audit-hint"></span></div>
            <div class="home-chart-body"><canvas id="home-chart-system"></canvas><div class="home-empty">Нет данных</div></div>
        </article>
        {% endif %}
    </section>

    <section class="home-panel" aria-labelledby="home-recent-heading">
        <div class="home-panel-head">
            <h3 id="home-recent-heading">Последние запуски</h3>
            <a class="home-panel-meta" href="/ansible">Раздел Ansible</a>
        </div>
        <div class="home-list" id="home-recent-runs">
            <div class="home-empty">Загрузка…</div>
        </div>
    </section>
</div>

<script>
(function () {
    const req = window.awmOriginalFetch ? window.awmOriginalFetch.bind(window) : window.fetch.bind(window);
    const username = {{ (current_user.username if current_user else '') | tojson }};
    const profileTimezone = {{ (home_summary.timezone if home_summary else none) | tojson }};
    const HOME_REFRESH_MS = 45000;
    const HOME_CLOCK_MS = 1000;
    let homeRefreshTimer = null;
    let homeClockTimer = null;
    let homeMetricsInFlight = false;

    const STATUS_LABELS = {
        success: 'Успешно',
        failed: 'Ошибка',
        running: 'Выполняется',
        pending: 'В очереди',
        cancelled: 'Отменён',
        other: 'Прочее',
    };

    function fmtNum(n) {
        const v = Number(n);
        if (!Number.isFinite(v)) return '—';
        return new Intl.NumberFormat('ru-RU').format(v);
    }

    function fmtUptimeSeconds(totalSec) {
        const sec = Number(totalSec);
        if (!Number.isFinite(sec) || sec < 0) return '—';
        const d = Math.floor(sec / 86400);
        const h = Math.floor((sec % 86400) / 3600);
        const m = Math.floor((sec % 3600) / 60);
        if (d > 0) return `${d}д ${h}ч ${m}м`;
        return `${h}ч ${m}м`;
    }

    function localeOpts(extra) {
        const opts = Object.assign({}, extra || {});
        if (profileTimezone) {
            opts.timeZone = profileTimezone;
        }
        return opts;
    }

    function localHourNow() {
        try {
            const parts = new Intl.DateTimeFormat('en-GB', localeOpts({ hour: 'numeric', hour12: false })).formatToParts(new Date());
            const hourPart = parts.find((p) => p.type === 'hour');
            const h = Number(hourPart && hourPart.value);
            return Number.isFinite(h) ? h : new Date().getHours();
        } catch (_e) {
            return new Date().getHours();
        }
    }

    function updateHomeClock() {
        const now = new Date();
        const timeEl = document.getElementById('home-clock-time');
        const dateEl = document.getElementById('home-clock-date');
        try {
            if (timeEl) {
                timeEl.textContent = now.toLocaleTimeString('ru-RU', localeOpts({
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                }));
            }
            if (dateEl) {
                dateEl.textContent = now.toLocaleDateString('ru-RU', localeOpts({
                    weekday: 'short',
                    day: 'numeric',
                    month: 'short',
                }));
            }
        } catch (_e) {
            if (timeEl) {
                timeEl.textContent = now.toLocaleTimeString('ru-RU', {
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                });
            }
            if (dateEl) {
                dateEl.textContent = now.toLocaleDateString('ru-RU', {
                    weekday: 'short',
                    day: 'numeric',
                    month: 'short',
                });
            }
        }
    }

    function greetingText() {
        return username ? `Сводка · ${username}` : 'Сводка';
    }

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    async function safeJson(url) {
        try {
            const r = await req(url, { credentials: 'same-origin' });
            if (!r.ok) return null;
            return await r.json();
        } catch (_e) {
            return null;
        }
    }

    function setText(id, text) {
        const el = document.getElementById(id);
        if (!el) return;
        el.textContent = text;
        el.classList.remove('home-loading');
    }

    function statusClass(status) {
        const st = String(status || '').toLowerCase();
        if (st === 'success') return 'success';
        if (st === 'failed') return 'failed';
        if (st === 'running') return 'running';
        if (st === 'pending') return 'pending';
        if (st === 'cancelled') return 'cancelled';
        return 'other';
    }

    function statusLabel(status) {
        const key = statusClass(status);
        return STATUS_LABELS[key] || STATUS_LABELS.other;
    }

    function renderRecentRuns(runs) {
        const holder = document.getElementById('home-recent-runs');
        if (!holder) return;
        const recent = (runs || []).slice(0, 5);
        if (!recent.length) {
            holder.innerHTML = '<div class="home-empty">Нет запусков в доступной истории</div>';
            return;
        }
        holder.innerHTML = recent.map((run) => {
            const title = escapeHtml(run.playbook_name || run.id || 'Запуск');
            const when = run.created_at
                ? new Date(run.created_at).toLocaleString('ru-RU', localeOpts({
                    day: 'numeric',
                    month: 'short',
                    hour: '2-digit',
                    minute: '2-digit',
                }))
                : '—';
            const inv = run.inventory_name ? ` · ${escapeHtml(run.inventory_name)}` : '';
            const st = String(run.status || 'unknown');
            const sc = statusClass(st);
            const label = escapeHtml(statusLabel(st));
            return `<a class="home-run-item is-${sc}" href="/ansible">
                <div class="home-run-title" title="${title}">${title}</div>
                <span class="home-status-pill ${sc}">${label}</span>
                <div class="home-run-meta">${escapeHtml(when)}${inv}</div>
            </a>`;
        }).join('');
    }

    function updateRefreshBadge(updating) {
        const refreshBadge = document.getElementById('home-refresh-badge');
        if (!refreshBadge) return;
        if (updating) {
            refreshBadge.textContent = 'Обновление…';
            return;
        }
        const time = new Date().toLocaleTimeString('ru-RU', localeOpts({ hour: '2-digit', minute: '2-digit' }));
        refreshBadge.textContent = `Обновлено ${time}`;
    }

    async function loadHomeMetrics(options) {
        const opts = options || {};
        if (homeMetricsInFlight) return;
        homeMetricsInFlight = true;
        updateRefreshBadge(true);
        try {
            if (opts.updateGreeting !== false) {
                const greeting = document.getElementById('home-greeting');
                if (greeting) greeting.textContent = greetingText();
            }
            updateHomeClock();

            const [programInfo, homeMetrics] = await Promise.all([
                safeJson('/api/settings/program-info'),
                safeJson('/api/home/metrics'),
            ]);

            const uptimeSec = (homeMetrics && homeMetrics.uptime_in_seconds != null)
                ? homeMetrics.uptime_in_seconds
                : (programInfo && programInfo.uptime_in_seconds);
            setText('home-uptime', fmtUptimeSeconds(uptimeSec));
            const serviceBadge = document.getElementById('home-service-badge');
            const serviceBadgeText = document.getElementById('home-service-badge-text');
            if (serviceBadge) {
                const online = uptimeSec != null;
                serviceBadge.classList.toggle('ok', online);
                serviceBadge.classList.toggle('warn', !online);
                if (serviceBadgeText) {
                    serviceBadgeText.textContent = online ? 'Сервис в сети' : 'Сервис не в сети';
                } else {
                    serviceBadge.textContent = online ? 'Сервис в сети' : 'Сервис не в сети';
                }
            }

            const runsBlock = (homeMetrics && homeMetrics.runs) ? homeMetrics.runs : null;
            const total = runsBlock ? Number(runsBlock.total || 0) : 0;
            const success = runsBlock ? Number(runsBlock.success || 0) : 0;
            const failed = runsBlock ? Number(runsBlock.failed || 0) : 0;
            const active = runsBlock ? Number(runsBlock.active || 0) : 0;
            const decided = success + failed;
            const successRate = decided ? Math.round((success / decided) * 100) : 0;

            setText('home-runs-total', fmtNum(total));
            setText('home-runs-success-fail', `${fmtNum(success)} / ${fmtNum(failed)}`);
            setText('home-runs-active', fmtNum(active));
            setText('home-success-rate', decided ? `Успешность выборки: ${successRate}%` : 'Нет завершённых запусков');
            const bar = document.getElementById('home-success-bar');
            if (bar) bar.style.width = `${decided ? successRate : 0}%`;

            const monitoring = (homeMetrics && homeMetrics.monitoring) ? homeMetrics.monitoring : null;
            const monTotal = monitoring ? Number(monitoring.total || 0) : 0;
            const monOnline = monitoring ? Number(monitoring.online || 0) : 0;
            const activeNote = document.getElementById('home-active-note');
            if (activeNote) {
                if (monTotal > 0) {
                    activeNote.textContent = `Мониторинг: ${fmtNum(monOnline)} из ${fmtNum(monTotal)} в сети`;
                } else {
                    activeNote.textContent = 'В очереди и выполняются';
                }
            }

            renderRecentRuns(runsBlock && Array.isArray(runsBlock.sample) ? runsBlock.sample : []);
            if (window.AwmHomeCharts) await window.AwmHomeCharts.refresh();
        } finally {
            updateRefreshBadge(false);
            homeMetricsInFlight = false;
        }
    }

    function startHomeAutoRefresh() {
        if (homeRefreshTimer) window.clearInterval(homeRefreshTimer);
        homeRefreshTimer = window.setInterval(() => {
            if (document.hidden) return;
            loadHomeMetrics({ updateGreeting: false });
        }, HOME_REFRESH_MS);
    }

    function stopHomeAutoRefresh() {
        if (!homeRefreshTimer) return;
        window.clearInterval(homeRefreshTimer);
        homeRefreshTimer = null;
    }

    function startHomeClock() {
        if (homeClockTimer) window.clearInterval(homeClockTimer);
        updateHomeClock();
        homeClockTimer = window.setInterval(() => {
            if (document.hidden) return;
            updateHomeClock();
        }, HOME_CLOCK_MS);
    }

    function stopHomeClock() {
        if (!homeClockTimer) return;
        window.clearInterval(homeClockTimer);
        homeClockTimer = null;
    }

    document.addEventListener('DOMContentLoaded', () => {
        loadHomeMetrics();
        startHomeAutoRefresh();
        startHomeClock();
    });

    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            stopHomeAutoRefresh();
            stopHomeClock();
            return;
        }
        loadHomeMetrics({ updateGreeting: false });
        startHomeAutoRefresh();
        startHomeClock();
    });

    window.addEventListener('beforeunload', () => {
        stopHomeAutoRefresh();
        stopHomeClock();
    });
}());
</script>
{{ vendor_chart_js() }}
<script src="/static/js/home-charts.js?v=2"></script>
{% endblock %}