{% extends "base.html" %}

{% block title %}Профиль - AWM{% endblock %}

{% block content %}
<style>
    .profile-page { display: grid; gap: 16px; }
    .profile-shell { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
    .profile-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary)); }
    .profile-title { margin: 0; font-size: 1.1rem; color: var(--gray-900); }
    .profile-content { padding: 16px 18px 20px; display: grid; gap: 16px; }
    .profile-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid var(--border); background: var(--bg-secondary); border-radius: 14px; padding: 18px; }
    .profile-hero-main { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 280px; }
    .profile-avatar { width: 72px; height: 72px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 45%, var(--bg))); border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 22%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease; flex: 0 0 auto; }
    .profile-avatar:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 30%, transparent); }
    .profile-hero-text { min-width: 0; }
    .profile-hero-name { margin: 0 0 4px 0; font-size: 1.25rem; color: var(--gray-900); line-height: 1.25; word-break: break-word; }
    .profile-hero-meta { margin: 0 0 10px; color: var(--gray-600); font-size: 0.9rem; }
    .profile-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .profile-status-chip, .profile-meta-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 10px; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--gray-700); transition: border-color 0.15s ease, background 0.15s ease; }
    .profile-meta-chip:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
    .profile-status-chip.active { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
    .profile-status-chip.inactive { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
    .profile-office-summary { margin: 0 0 12px; color: var(--gray-600); font-size: 0.88rem; line-height: 1.45; }
    .profile-office-rows { display: grid; gap: 8px; }
    .profile-office-row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
    .profile-office-row.is-current { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
    .profile-office-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
    .profile-office-row-name { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--gray-900); }
    .profile-office-row-badges { display: flex; flex-wrap: wrap; gap: 6px; }
    .profile-office-row-desc { margin: 0; font-size: 0.82rem; color: var(--gray-500); line-height: 1.45; }
    .profile-office-hint { margin: 10px 0 0; }
    .profile-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; flex: 0 1 auto; }
    .profile-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); }
    .profile-tab { appearance: none; border: 1px solid transparent; background: transparent; color: var(--gray-600); font: inherit; font-weight: 600; font-size: 0.9rem; padding: 10px 14px; border-radius: 10px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
    .profile-tab:hover { color: var(--gray-800); background: color-mix(in srgb, var(--primary) 8%, transparent); }
    .profile-tab.is-active { color: var(--primary); background: var(--surface); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 18%, transparent); }
    .profile-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
    .profile-panel { display: none; animation: profilePanelIn 0.18s ease; }
    .profile-panel.is-active { display: block; }
    @keyframes profilePanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    .profile-section { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-secondary); padding: 16px; }
    .profile-section h3, .profile-section-title { margin: 0 0 14px 0; font-size: 1rem; color: var(--gray-900); }
    .profile-section-subtitle { margin: -6px 0 14px; color: var(--gray-500); font-size: 0.88rem; }
    .profile-section .form-group label { font-size: 14px; font-weight: 600; color: var(--gray-700); }
    .profile-section input[type="text"], .profile-section input[type="email"], .profile-section input[type="time"], .profile-section input[type="password"], .profile-section select, .profile-section textarea { width: 100%; box-sizing: border-box; padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px; background: var(--input-bg); color: var(--gray-800); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
    .profile-section input:focus, .profile-section select:focus, .profile-section textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent); }
    .profile-section input[readonly] { opacity: 0.85; cursor: default; }
    .profile-form-divider { margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-500); }
    .profile-save-status { margin-top: 10px; font-size: 0.88rem; color: var(--gray-600); min-height: 1.2em; }
    .profile-save-status.is-ok { color: var(--success); font-weight: 600; }
    .profile-save-status.is-error { color: var(--danger); font-weight: 600; }
    .awm-check, .awm-check-chip { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-weight: 500; color: var(--gray-800); line-height: 1.35; user-select: none; }
    .awm-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    .awm-check__visual { box-sizing: border-box; flex: 0 0 20px; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 6px; background: var(--input-bg); display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
    .awm-check__visual::after { content: ""; box-sizing: border-box; width: 5px; height: 9px; margin-top: -1px; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.12s ease; }
    .awm-check__input:hover + .awm-check__visual, .awm-check:hover .awm-check__visual, .awm-check-chip:hover .awm-check__visual { border-color: var(--primary); }
    .awm-check__input:focus-visible + .awm-check__visual { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }
    .awm-check__input:checked + .awm-check__visual { background: var(--primary); border-color: var(--primary); }
    .awm-check__input:checked + .awm-check__visual::after { border-color: #fff; opacity: 1; }
    .awm-check__text { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--gray-800); }
    .awm-check-section-title { margin: 0 0 12px; font-weight: 600; font-size: 14px; color: var(--gray-800); }
    .awm-check-grid { display: grid; gap: 16px; }
    .awm-check-group { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
    .awm-check-group-title { margin: 0; padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-500); background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
    .awm-check-list { display: grid; gap: 0; padding: 4px; }
    .awm-check-chip { padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; transition: background 0.15s ease, border-color 0.15s ease; }
    .awm-check-chip:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
    .awm-check-chip:has(.awm-check__input:checked) { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: color-mix(in srgb, var(--primary) 28%, transparent); }
    .awm-check-chip .awm-check__text { font-size: 13px; font-weight: 500; }
    #notif-email-block .awm-check { margin-bottom: 6px; }
    .notif-email-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
    .notif-email-heading__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--gray-800); }
    .notif-email-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
    .notif-email-status-badge__icon { width: 16px; height: 16px; flex: 0 0 16px; }
    .notif-email-status-badge.is-on { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
    .notif-email-status-badge.is-off { color: var(--gray-500); background: color-mix(in srgb, var(--gray-500) 12%, transparent); border-color: var(--border); }
    .notif-email-status-badge.is-blocked { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); }
    .profile-roles-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .profile-role-chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--gray-800); font-size: 0.85rem; font-weight: 600; }
    .profile-perm-summary { margin: 0 0 12px; color: var(--gray-600); font-size: 0.88rem; }
    .profile-perm-groups { display: grid; gap: 14px; max-height: min(70vh, 640px); overflow: auto; padding-right: 4px; }
    .profile-perm-group { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
    .profile-perm-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
    .profile-perm-group-title { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--gray-900); }
    .profile-perm-group-count { font-size: 0.78rem; color: var(--gray-500); font-weight: 600; }
    .profile-perm-list { display: grid; gap: 0; }
    .profile-perm-item { padding: 10px 12px; border-top: 1px solid var(--border); }
    .profile-perm-item:first-child { border-top: none; }
    .profile-perm-title { margin: 0 0 4px; font-size: 0.9rem; font-weight: 600; color: var(--gray-900); line-height: 1.3; }
    .profile-perm-desc { margin: 0 0 6px; font-size: 0.8rem; color: var(--gray-600); line-height: 1.45; }
    .profile-perm-code { display: inline-block; font-size: 0.72rem; color: var(--gray-500); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
    .profile-perm-empty { color: var(--gray-600); font-size: 0.9rem; }
    .profile-note { margin-top: 2px; color: var(--gray-600); display: block; font-size: 0.85rem; line-height: 1.45; }
    .privacy-stack { display: grid; gap: 14px; }
    .privacy-block { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px; }
    .privacy-block-title { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; color: var(--gray-900); }
    .privacy-block-hint { margin: 0 0 12px; color: var(--gray-500); font-size: 0.82rem; line-height: 1.45; }
    .privacy-meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
    .privacy-notice-body {
        max-height: min(42vh, 360px);
        overflow: auto;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-secondary);
        color: var(--gray-800);
        white-space: pre-wrap;
        font-size: 0.88rem;
        line-height: 1.55;
    }
    .privacy-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .privacy-status-line { margin: 0; font-size: 0.85rem; color: var(--gray-600); min-height: 1.2em; }
    .profile-notification-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .notif-fields-group { display: none; }
    .notif-fields-group.active { display: block; }
    .profile-modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: var(--modal-overlay, rgba(15, 23, 42, 0.55)); z-index: 2000; padding: 16px; }
    .profile-modal-overlay.show { display: flex; }
    .profile-modal { width: 100%; max-width: 460px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.3); animation: modalContentIn 0.14s ease-out; }
    .profile-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .profile-modal-title { margin: 0; font-size: 1rem; }
    .profile-modal-body { padding: 14px 16px 16px; }
    .profile-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
    .profile-modal--wide { max-width: 640px; }
    .profile-token-field { width: 100%; min-height: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; line-height: 1.4; resize: vertical; word-break: break-all; }
    .profile-token-hint { margin: 8px 0 0; color: var(--gray-600); font-size: 0.85rem; line-height: 1.4; }
    .profile-token-error { margin-top: 8px; color: var(--danger); font-size: 0.85rem; }
    .profile-api-tokens-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    .profile-api-tokens-table th, .profile-api-tokens-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
    .profile-api-tokens-table th { color: var(--gray-600); font-weight: 600; font-size: 0.8rem; background: var(--bg-secondary); }
    .profile-api-token-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
    .profile-api-token-scope-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--gray-800); font-size: 0.75rem; }
    .profile-api-token-status { font-weight: 600; font-size: 0.85rem; }
    .profile-api-token-status.active { color: var(--success); }
    .profile-api-token-status.revoked { color: var(--danger); }
    .profile-api-token-status.expired { color: var(--warning); }
    .profile-api-token-status.suspended { color: var(--warning); }
    .profile-api-token-status.outside_schedule { color: var(--gray-500); }
    .profile-pat-days { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; }
    .profile-pat-days label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
    .profile-api-token-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; white-space: nowrap; }
    .profile-api-token-actions .ui-icon-btn { flex-shrink: 0; width: 28px; height: 28px; min-width: 28px; border-radius: 8px; }
    .profile-api-token-scope-list { max-height: 260px; overflow: auto; border: 2px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--input-bg); }
    .profile-api-token-scope-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 0.9rem; }
    .profile-api-token-scope-item label { font-weight: 500; cursor: pointer; }
    .profile-sessions-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .profile-sessions-hint { margin: 0; color: var(--gray-500); font-size: 0.85rem; line-height: 1.45; flex: 1 1 220px; }
    .profile-sessions-list { display: grid; gap: 8px; max-height: min(50vh, 420px); overflow: auto; }
    .profile-session-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); }
    .profile-session-row.is-current { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
    .profile-session-main { min-width: 0; flex: 1 1 220px; }
    .profile-session-title { margin: 0 0 4px; font-size: 0.92rem; font-weight: 700; color: var(--gray-900); }
    .profile-session-meta { margin: 0; font-size: 0.8rem; color: var(--gray-600); line-height: 1.45; word-break: break-word; }
    .profile-session-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .profile-sessions-empty { margin: 0; padding: 16px; text-align: center; color: var(--gray-600); font-size: 0.9rem; }
    .profile-sessions-status { margin: 10px 0 0; min-height: 0; font-size: 0.85rem; color: var(--gray-600); }
    .profile-sessions-status:empty { display: none; }
    .profile-sessions-status.is-pending { color: var(--gray-600); font-weight: 500; }
    .profile-sessions-status.is-error {
        display: block;
        margin-top: 12px;
        border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--border));
        background: color-mix(in srgb, var(--danger) 16%, var(--surface));
        color: color-mix(in srgb, var(--danger) 88%, var(--gray-900));
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 0.9rem;
        font-weight: 700;
        line-height: 1.4;
    }
    .otp-digits.is-invalid .otp-digit {
        border-color: color-mix(in srgb, var(--danger) 70%, var(--border));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
    }
    .profile-modal.totp-modal { max-width: 480px; }
    .totp-manage { display: grid; gap: 16px; }
    .totp-manage[hidden],
    #totp-setup-panel[hidden],
    #totp-disable-panel[hidden] {
        display: none !important;
    }
    .totp-status-card {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
    }
    .totp-status-card__icon {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--gray-600);
    }
    .totp-status-card__icon svg { width: 22px; height: 22px; display: block; }
    .totp-status-card__body { min-width: 0; flex: 1 1 auto; }
    .totp-status-card__label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0 0 6px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--gray-700);
    }
    .totp-status-card__title {
        margin: 0 0 4px;
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.3;
    }
    .totp-status-card__text {
        margin: 0;
        font-size: 0.86rem;
        line-height: 1.45;
        color: var(--gray-500);
    }
    .totp-status-card[data-state="on"] {
        border-color: color-mix(in srgb, var(--success) 42%, var(--border));
        background: color-mix(in srgb, var(--success) 12%, var(--bg-secondary));
    }
    .totp-status-card[data-state="on"] .totp-status-card__icon {
        color: var(--success);
        border-color: color-mix(in srgb, var(--success) 40%, var(--border));
        background: color-mix(in srgb, var(--success) 14%, var(--surface));
    }
    .totp-status-card[data-state="on"] .totp-status-card__label {
        color: var(--success);
        border-color: color-mix(in srgb, var(--success) 40%, var(--border));
        background: color-mix(in srgb, var(--success) 14%, var(--surface));
    }
    .totp-status-card[data-state="off"] {
        border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
        background: color-mix(in srgb, var(--warning) 10%, var(--bg-secondary));
    }
    .totp-status-card[data-state="off"] .totp-status-card__icon {
        color: var(--warning);
        border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
        background: color-mix(in srgb, var(--warning) 12%, var(--surface));
    }
    .totp-status-card[data-state="off"] .totp-status-card__label {
        color: color-mix(in srgb, var(--warning) 85%, var(--gray-900));
        border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
        background: color-mix(in srgb, var(--warning) 12%, var(--surface));
    }
    .totp-status-card[data-state="warn"] {
        border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
        background: color-mix(in srgb, var(--danger) 10%, var(--bg-secondary));
    }
    .totp-status-card[data-state="warn"] .totp-status-card__icon {
        color: var(--danger);
        border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
        background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    }
    .totp-status-card[data-state="warn"] .totp-status-card__label {
        color: var(--danger);
        border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
        background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    }
    .totp-status-card[data-state="muted"] {
        border-color: var(--border);
        background: var(--bg-secondary);
    }
    .totp-manage-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
        padding-top: 2px;
    }
    .totp-manage-actions .profile-note { margin: 0; flex: 1 1 100%; text-align: left; }
    .totp-setup-hint { margin: 0 0 4px; }
    #totp-qr-wrap {
        text-align: center;
        margin: 8px 0 14px;
        padding: 14px;
        border-radius: 14px;
        border: 1px dashed var(--border);
        background: var(--bg-secondary);
    }
    #totp-qr-wrap img {
        display: inline-block;
        max-width: 220px;
        height: auto;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: #fff;
    }
    @media (max-width: 720px) {
        .profile-hero-actions { width: 100%; justify-content: stretch; }
        .profile-hero-actions .btn { flex: 1 1 auto; }
        .profile-tabs { overflow-x: auto; flex-wrap: nowrap; }
        .profile-tab { flex: 0 0 auto; }
    }
</style>

<div class="profile-page">
    <div class="profile-shell">
        <div class="profile-toolbar">
            <h2 class="profile-title">Профиль пользователя</h2>
        </div>
        <div id="profile-content" class="profile-content">
            <div class="loading">Загрузка профиля...</div>
        </div>
    </div>
</div>
<div id="password-modal-overlay" class="profile-modal-overlay" aria-hidden="true">
    <div class="profile-modal" role="dialog" aria-modal="true" aria-labelledby="password-modal-title">
        <div class="profile-modal-header">
            <h3 id="password-modal-title" class="profile-modal-title">Смена пароля</h3>
            <button type="button" class="btn btn-secondary" id="password-modal-close">Закрыть</button>
        </div>
        <div class="profile-modal-body">
            <form id="password-change-form">
                <div class="form-group">
                    <label for="current-password">Текущий пароль</label>
                    <input type="password" id="current-password" autocomplete="current-password" required>
                </div>
                <div class="form-group">
                    <label for="new-password">Новый пароль</label>
                    <input type="password" id="new-password" autocomplete="new-password" minlength="8" required>
                </div>
                <div class="form-group">
                    <label for="confirm-password">Подтверждение нового пароля</label>
                    <input type="password" id="confirm-password" autocomplete="new-password" minlength="8" required>
                </div>
                <small class="profile-note">После успешной смены пароля будет выполнен выход из текущей сессии и отключение удалённых рабочих столов.</small>
                <div class="profile-modal-actions">
                    <button type="button" class="btn btn-secondary" id="password-modal-cancel">Отмена</button>
                    <button type="submit" class="btn btn-primary">Сменить пароль</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="totp-modal-overlay" class="profile-modal-overlay" aria-hidden="true">
    <div class="profile-modal totp-modal" role="dialog" aria-modal="true" aria-labelledby="totp-modal-title">
        <div class="profile-modal-header">
            <h3 id="totp-modal-title" class="profile-modal-title">Двухфакторная аутентификация</h3>
            <button type="button" class="btn btn-secondary" id="totp-modal-close">Закрыть</button>
        </div>
        <div class="profile-modal-body">
            <div id="totp-manage-panel" class="totp-manage">
                <div id="totp-manage-status-card" class="totp-status-card" data-state="muted" aria-live="polite"></div>
                <div class="totp-manage-actions" id="totp-manage-actions"></div>
                <p id="totp-manage-status" class="profile-sessions-status" aria-live="polite"></p>
            </div>
            <div id="totp-setup-panel" hidden>
                <p class="profile-note totp-setup-hint" id="totp-modal-hint">Отсканируйте QR-код в приложении (Google Authenticator, FreeOTP и аналоги) и введите код ниже.</p>
                <div id="totp-qr-wrap"></div>
                <div class="form-group">
                    <label for="totp-manual-secret">Секрет (если нельзя отсканировать QR)</label>
                    <input type="text" id="totp-manual-secret" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <span id="totp-confirm-code-label">Код подтверждения</span>
                    <div class="otp-digits" id="totp-confirm-code-digits" role="group" aria-labelledby="totp-confirm-code-label">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 1 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 2 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 3 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 4 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 5 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 6 из 6">
                    </div>
                </div>
                <div class="profile-modal-actions">
                    <button type="button" class="btn btn-secondary" id="totp-modal-cancel">Назад</button>
                    <button type="button" class="btn btn-primary" id="totp-confirm-btn">Подтвердить</button>
                </div>
                <p id="totp-modal-status" class="profile-sessions-status" aria-live="assertive"></p>
            </div>
            <div id="totp-disable-panel" hidden>
                <p class="profile-note totp-setup-hint">Введите текущий шестизначный код из приложения, чтобы отключить 2FA.</p>
                <div class="form-group">
                    <span id="totp-disable-code-label">Код 2FA</span>
                    <div class="otp-digits" id="totp-disable-code-digits" role="group" aria-labelledby="totp-disable-code-label">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" aria-label="Цифра 1 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 2 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 3 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 4 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 5 из 6">
                        <input type="text" class="form-control otp-digit" data-otp-digit maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Цифра 6 из 6">
                    </div>
                </div>
                <div class="profile-modal-actions">
                    <button type="button" class="btn btn-secondary" id="totp-disable-cancel">Отмена</button>
                    <button type="button" class="btn btn-danger" id="totp-disable-confirm-btn">Отключить</button>
                </div>
                <p id="totp-disable-status" class="profile-sessions-status" aria-live="assertive"></p>
            </div>
        </div>
    </div>
</div>
<div id="sessions-modal-overlay" class="profile-modal-overlay" aria-hidden="true">
    <div class="profile-modal profile-modal--wide" role="dialog" aria-modal="true" aria-labelledby="sessions-modal-title">
        <div class="profile-modal-header">
            <h3 id="sessions-modal-title" class="profile-modal-title">Активные сессии</h3>
            <button type="button" class="btn btn-secondary" id="sessions-modal-close">Закрыть</button>
        </div>
        <div class="profile-modal-body">
            <div class="profile-sessions-toolbar">
                <p class="profile-sessions-hint">Входы в AWM с разных устройств. Завершение текущей сессии выполнит выход и отключит удалённые рабочие столы.</p>
                <button type="button" class="btn btn-secondary" id="sessions-revoke-others-btn">Завершить все, кроме текущей</button>
            </div>
            <div class="totp-status-card" id="single-session-card" data-state="muted" style="margin-bottom:14px;">
                <div class="totp-status-card__body" style="width:100%;">
                    <h4 class="totp-status-card__title" style="margin-bottom:8px;">Односессионный режим</h4>
                    <p class="totp-status-card__text" id="single-session-hint" style="margin-bottom:10px;">
                        При повторном входе предыдущие сессии этой учётки будут завершены.
                    </p>
                    <label class="awm-check" for="single-session-enabled" style="margin:0;">
                        <input type="checkbox" class="awm-check__input" id="single-session-enabled">
                        <span class="awm-check__visual" aria-hidden="true"></span>
                        <span>Только одна активная сессия для моей учётки</span>
                    </label>
                    <p id="single-session-status" class="profile-sessions-status" aria-live="polite"></p>
                </div>
            </div>
            <div id="sessions-list" class="profile-sessions-list" aria-live="polite">
                <div class="profile-sessions-empty">Загрузка…</div>
            </div>
            <p id="sessions-status" class="profile-sessions-status" aria-live="polite"></p>
        </div>
    </div>
</div>
<div id="pat-create-modal-overlay" class="profile-modal-overlay" aria-hidden="true">
    <div class="profile-modal profile-modal--wide" role="dialog" aria-modal="true" aria-labelledby="pat-create-modal-title">
        <div class="profile-modal-header">
            <h3 id="pat-create-modal-title" class="profile-modal-title">Новый постоянный API-токен</h3>
            <button type="button" class="btn btn-secondary" id="pat-create-modal-close">Закрыть</button>
        </div>
        <div class="profile-modal-body">
            <form id="pat-create-form">
                <div class="form-group">
                    <label for="pat-create-name">Название <span style="color:var(--danger)">*</span></label>
                    <input type="text" id="pat-create-name" class="form-control" maxlength="120" required placeholder="Назначение токена">
                </div>
                <div class="form-group">
                    <label for="pat-create-expires">Срок действия (опционально)</label>
                    <input type="date" id="pat-create-expires" class="form-control">
                    <small class="profile-note">Если не указан — токен действует бессрочно, пока не будет отозван.</small>
                </div>
                <div class="form-group">
                    <label style="display:flex; align-items:center; gap:8px;">
                        <input type="checkbox" id="pat-create-schedule-enabled">
                        Ограничить работу по расписанию
                    </label>
                    <small class="profile-note">Время считается по часовому поясу из профиля (если не задан — UTC).</small>
                </div>
                <div id="pat-create-schedule-fields" style="display:none;">
                    <div class="form-group">
                        <label>Дни недели</label>
                        <div class="profile-pat-days" id="pat-create-days">
                            <label><input type="checkbox" value="1" data-pat-day> Пн</label>
                            <label><input type="checkbox" value="2" data-pat-day> Вт</label>
                            <label><input type="checkbox" value="3" data-pat-day> Ср</label>
                            <label><input type="checkbox" value="4" data-pat-day> Чт</label>
                            <label><input type="checkbox" value="5" data-pat-day> Пт</label>
                            <label><input type="checkbox" value="6" data-pat-day> Сб</label>
                            <label><input type="checkbox" value="7" data-pat-day> Вс</label>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="pat-create-time-start">С</label>
                            <input type="time" id="pat-create-time-start" class="form-control" value="09:00">
                        </div>
                        <div class="form-group">
                            <label for="pat-create-time-end">До</label>
                            <input type="time" id="pat-create-time-end" class="form-control" value="18:00">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Права токена <span style="color:var(--danger)">*</span></label>
                    <div id="pat-create-scopes" class="profile-api-token-scope-list"></div>
                    <small class="profile-note">Можно выбрать только права из вашего текущего набора. Роль администратора через токен не наследуется.</small>
                </div>
                <div id="pat-create-error" class="profile-token-error" hidden></div>
                <div class="profile-modal-actions">
                    <button type="button" class="btn btn-secondary" id="pat-create-modal-cancel">Отмена</button>
                    <button type="submit" class="btn btn-primary">Создать</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="pat-secret-modal-overlay" class="profile-modal-overlay" aria-hidden="true">
    <div class="profile-modal profile-modal--wide" role="dialog" aria-modal="true" aria-labelledby="pat-secret-modal-title">
        <div class="profile-modal-header">
            <h3 id="pat-secret-modal-title" class="profile-modal-title">Скопируйте токен сейчас</h3>
            <button type="button" class="btn btn-secondary" id="pat-secret-modal-close">Закрыть</button>
        </div>
        <div class="profile-modal-body">
            <p class="profile-token-hint">
                Секрет показывается <strong>один раз</strong>. Сохраните его в надёжном месте — повторно просмотреть нельзя.
            </p>
            <div class="form-group">
                <label for="pat-secret-token">Токен</label>
                <textarea id="pat-secret-token" class="form-control profile-token-field" readonly rows="3" spellcheck="false"></textarea>
                <div class="profile-modal-actions" style="margin-top:8px;">
                    <button type="button" class="btn btn-secondary btn-sm" id="pat-secret-copy-btn">Скопировать токен</button>
                </div>
            </div>
            <div class="form-group">
                <label for="pat-secret-header">Заголовок Authorization</label>
                <textarea id="pat-secret-header" class="form-control profile-token-field" readonly rows="2" spellcheck="false"></textarea>
                <div class="profile-modal-actions" style="margin-top:8px;">
                    <button type="button" class="btn btn-secondary btn-sm" id="pat-secret-copy-header-btn">Скопировать заголовок</button>
                </div>
            </div>
            <div class="profile-modal-actions">
                <button type="button" class="btn btn-primary" id="pat-secret-modal-done">Готово</button>
            </div>
        </div>
    </div>
</div>
<div id="pat-schedule-modal-overlay" class="profile-modal-overlay" aria-hidden="true">
    <div class="profile-modal profile-modal--wide" role="dialog" aria-modal="true" aria-labelledby="pat-schedule-modal-title">
        <div class="profile-modal-header">
            <h3 id="pat-schedule-modal-title" class="profile-modal-title">Расписание токена</h3>
            <button type="button" class="btn btn-secondary" id="pat-schedule-modal-close">Закрыть</button>
        </div>
        <div class="profile-modal-body">
            <form id="pat-schedule-form">
                <input type="hidden" id="pat-schedule-token-id">
                <div class="form-group">
                    <label style="display:flex; align-items:center; gap:8px;">
                        <input type="checkbox" id="pat-schedule-enabled">
                        Ограничить работу по расписанию
                    </label>
                </div>
                <div id="pat-schedule-fields">
                    <div class="form-group">
                        <label>Дни недели</label>
                        <div class="profile-pat-days" id="pat-schedule-days">
                            <label><input type="checkbox" value="1" data-pat-sched-day> Пн</label>
                            <label><input type="checkbox" value="2" data-pat-sched-day> Вт</label>
                            <label><input type="checkbox" value="3" data-pat-sched-day> Ср</label>
                            <label><input type="checkbox" value="4" data-pat-sched-day> Чт</label>
                            <label><input type="checkbox" value="5" data-pat-sched-day> Пт</label>
                            <label><input type="checkbox" value="6" data-pat-sched-day> Сб</label>
                            <label><input type="checkbox" value="7" data-pat-sched-day> Вс</label>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="pat-schedule-time-start">С</label>
                            <input type="time" id="pat-schedule-time-start" class="form-control" value="09:00">
                        </div>
                        <div class="form-group">
                            <label for="pat-schedule-time-end">До</label>
                            <input type="time" id="pat-schedule-time-end" class="form-control" value="18:00">
                        </div>
                    </div>
                </div>
                <div id="pat-schedule-error" class="profile-token-error" hidden></div>
                <div class="profile-modal-actions">
                    <button type="button" class="btn btn-secondary" id="pat-schedule-modal-cancel">Отмена</button>
                    <button type="submit" class="btn btn-primary">Сохранить</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/otp-digits.js"></script>
<script>
    function isSsoManagedAuthProvider(provider) {
        const p = String(provider || 'local').toLowerCase();
        return p === 'oidc' || p === 'sso';
    }

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

    const PROFILE_ROLE_TITLES = {
        admin: 'Администратор',
        operator: 'Оператор',
        viewer: 'Наблюдатель',
    };

    const PROFILE_TAB_IDS = ['main', 'privacy', 'notifications', 'roles', 'tokens'];
    const PROFILE_TAB_HASH = {
        main: 'profile-main',
        privacy: 'profile-privacy',
        notifications: 'profile-notifications',
        roles: 'profile-roles',
        tokens: 'profile-tokens',
    };

    function roleTitle(role) {
        const key = String(role || '').trim().toLowerCase();
        if (!key) return 'Роль';
        if (PROFILE_ROLE_TITLES[key]) return PROFILE_ROLE_TITLES[key];
        return key.replace(/[_-]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
    }

    function authProviderLabel(provider) {
        const p = String(provider || 'local').toLowerCase();
        if (p === 'oidc' || p === 'sso') return 'SSO';
        if (p === 'ldap') return 'LDAP';
        return 'Локальный вход';
    }

    function tabIdFromHash(hash) {
        const raw = String(hash || '').replace(/^#/, '').trim().toLowerCase();
        if (!raw) return null;
        for (const [id, h] of Object.entries(PROFILE_TAB_HASH)) {
            if (h === raw || raw === id) return id;
        }
        return null;
    }

    let profileNotificationsLoaded = false;
    let profileTokensLoaded = false;

    function activateProfileTab(tabId, options) {
        const opts = options || {};
        const updateHash = opts.updateHash !== false;
        let id = PROFILE_TAB_IDS.includes(tabId) ? tabId : 'main';
        const tokensTab = document.getElementById('profile-tab-tokens');
        if (id === 'tokens' && tokensTab && tokensTab.hidden) {
            id = 'main';
        }
        document.querySelectorAll('[data-profile-tab]').forEach((btn) => {
            const active = btn.getAttribute('data-profile-tab') === id;
            btn.classList.toggle('is-active', active);
            btn.setAttribute('aria-selected', active ? 'true' : 'false');
            btn.setAttribute('tabindex', active ? '0' : '-1');
        });
        document.querySelectorAll('[data-profile-panel]').forEach((panel) => {
            const active = panel.getAttribute('data-profile-panel') === id;
            panel.classList.toggle('is-active', active);
            panel.hidden = !active;
        });
        if (updateHash && PROFILE_TAB_HASH[id]) {
            const next = '#' + PROFILE_TAB_HASH[id];
            if (location.hash !== next) {
                history.replaceState(null, '', next);
            }
        }
        if (id === 'notifications' && !profileNotificationsLoaded) {
            profileNotificationsLoaded = true;
            void loadNotificationSettings();
        }
        if (id === 'tokens' && !profileTokensLoaded) {
            profileTokensLoaded = true;
            void loadProfileApiTokens();
        }
    }

    function initProfileTabs() {
        document.querySelectorAll('[data-profile-tab]').forEach((btn) => {
            btn.addEventListener('click', () => activateProfileTab(btn.getAttribute('data-profile-tab')));
        });
        document.querySelectorAll('[data-profile-tab-jump]').forEach((btn) => {
            btn.addEventListener('click', () => activateProfileTab(btn.getAttribute('data-profile-tab-jump')));
        });
        const fromHash = tabIdFromHash(location.hash);
        activateProfileTab(fromHash || 'main', { updateHash: !fromHash });
        if (!window.__awmProfileHashBound) {
            window.__awmProfileHashBound = true;
            window.addEventListener('hashchange', () => {
                const id = tabIdFromHash(location.hash);
                if (id) activateProfileTab(id, { updateHash: false });
            });
        }
    }

    function setProfileSaveStatus(message, kind) {
        const el = document.getElementById('profile-save-status');
        if (!el) return;
        el.textContent = message || '';
        el.classList.remove('is-ok', 'is-error');
        if (kind === 'ok') el.classList.add('is-ok');
        if (kind === 'error') el.classList.add('is-error');
    }

    function renderRoles(roles) {
        const list = Array.isArray(roles) ? roles.filter(Boolean) : [];
        if (!list.length) {
            return '<div class="profile-perm-empty">Роли не назначены</div>';
        }
        return `<div class="profile-roles-chips">${list.map((role) =>
            `<span class="profile-role-chip">${escapeHtml(roleTitle(role))}</span>`
        ).join('')}</div>`;
    }

    function renderPermissionsView(view, fallbackNames) {
        const groups = Array.isArray(view?.groups) ? view.groups : [];
        const total = Number(view?.total || 0);
        if (!groups.length) {
            const names = Array.isArray(fallbackNames) ? fallbackNames : [];
            if (!names.length) {
                return '<div class="profile-perm-empty">Разрешения не назначены</div>';
            }
            return `<div class="profile-perm-empty">Технические ключи: ${escapeHtml(names.join(', '))}</div>`;
        }
        const summary = `<p class="profile-perm-summary">Всего прав: <strong>${total}</strong> · сгруппированы по разделам. Под каждым правом — что оно позволяет делать.</p>`;
        const body = groups.map((group) => {
            const items = (group.permissions || []).map((perm) => `
                <div class="profile-perm-item">
                    <div class="profile-perm-title">${escapeHtml(perm.title || perm.name)}</div>
                    <p class="profile-perm-desc">${escapeHtml(perm.description || '')}</p>
                    <code class="profile-perm-code">${escapeHtml(perm.name || '')}</code>
                </div>
            `).join('');
            return `
                <section class="profile-perm-group" aria-label="${escapeHtml(group.label || group.group || 'Права')}">
                    <div class="profile-perm-group-head">
                        <h4 class="profile-perm-group-title">${escapeHtml(group.label || 'Раздел')}</h4>
                        <span class="profile-perm-group-count">${Number(group.count || 0)}</span>
                    </div>
                    <div class="profile-perm-list">${items}</div>
                </section>
            `;
        }).join('');
        return `${summary}<div class="profile-perm-groups">${body}</div>`;
    }

    function officeMemberships(office) {
        if (!office || office.visible === false) return [];
        const list = Array.isArray(office.memberships) ? office.memberships.slice() : [];
        if (!list.length && office.current && office.current.name) {
            list.push({ ...office.current, is_current: true });
        }
        return list.filter((item) => String(item && item.name || '').trim());
    }

    function officesCountPhrase(count) {
        const n = Number(count) || 0;
        const n10 = n % 10;
        const n100 = n % 100;
        if (n === 1) return 'Вы состоите в одном подразделении.';
        if (n10 === 1 && n100 !== 11) return `Вы состоите в ${n} подразделении.`;
        return `Вы состоите в ${n} подразделениях.`;
    }

    function renderOfficeHeroChips(office) {
        const list = officeMemberships(office);
        if (!list.length) return '';
        const current = list.find((item) => item.is_current) || list[0];
        const name = String(current.name || '').trim();
        const extra = list.length > 1
            ? `<span class="profile-meta-chip">Ещё ${list.length - 1}</span>`
            : '';
        return `<span class="profile-meta-chip">${escapeHtml('Подразделение: ' + name)}</span>${extra}`;
    }

    function renderOfficeSection(office) {
        const list = officeMemberships(office);
        if (!list.length) return '';
        const current = list.find((item) => item.is_current) || list[0];
        const currentName = String(current && current.name || '').trim();
        const many = list.length > 1;
        let summary = officesCountPhrase(list.length);
        if (many && currentName) {
            summary += ` Сейчас открыто: ${currentName}.`;
        }
        const rows = list.map((item) => {
            const name = String(item.name || '').trim();
            const description = String(item.description || '').trim();
            const badges = [];
            if (item.is_current) {
                badges.push('<span class="profile-meta-chip">Текущая сессия</span>');
            }
            if (item.is_primary) {
                badges.push('<span class="profile-meta-chip">Основное</span>');
            }
            const descHtml = description
                ? `<p class="profile-office-row-desc">${escapeHtml(description)}</p>`
                : '';
            return `
                <article class="profile-office-row${item.is_current ? ' is-current' : ''}">
                    <div class="profile-office-row-head">
                        <h4 class="profile-office-row-name">${escapeHtml(name)}</h4>
                        <div class="profile-office-row-badges">${badges.join('')}</div>
                    </div>
                    ${descHtml}
                </article>
            `;
        }).join('');
        const hint = (office.mode === 'multi' && many)
            ? '<small class="profile-note profile-office-hint">Плейбуки, хосты и секреты относятся к текущему подразделению. Переключить можно в шапке.</small>'
            : '';
        return `
            <div class="profile-section">
                <h3 class="profile-section-title">Подразделения</h3>
                <p class="profile-office-summary">${escapeHtml(summary)}</p>
                <div class="profile-office-rows">${rows}</div>
                ${hint}
            </div>
        `;
    }

    async function loadProfile() {
        const container = document.getElementById('profile-content');
        try {
            const response = await fetch('/api/auth/me');
            if (!response.ok) throw new Error('Ошибка загрузки профиля');
            const me = await response.json();
            const rolesHtml = renderRoles(me.roles || []);
            const permissionsHtml = renderPermissionsView(me.permissions_view, me.permissions || []);
            const initials = (me.full_name || me.username || 'U').trim().slice(0, 1).toUpperCase();
            const roleChips = (Array.isArray(me.roles) ? me.roles : []).filter(Boolean)
                .map((role) => `<span class="profile-meta-chip">${escapeHtml(roleTitle(role))}</span>`)
                .join('');
            const officeChips = renderOfficeHeroChips(me.office);
            const officeSectionHtml = renderOfficeSection(me.office);
            const canPat = userCanManageApiTokens(me);
            const ssoManagedPreview = isSsoManagedAuthProvider(me.auth_provider || 'local');
            const passwordBtnHtml = ssoManagedPreview
                ? ''
                : '<button type="button" id="change-password-btn" class="btn btn-secondary">Сменить пароль</button>';
            const notifJump = '<button type="button" class="btn btn-secondary" data-profile-tab-jump="notifications">Оповещения</button>';
            const tokensJump = canPat
                ? '<button type="button" class="btn btn-secondary" data-profile-tab-jump="tokens">Токены</button>'
                : '';
            const totpLocal = !ssoManagedPreview;
            const totpFeature = !!(me.totp && me.totp.feature_enabled);
            const totpBtnHtml = (totpFeature && totpLocal)
                ? '<button type="button" id="totp-btn-profile" class="btn btn-secondary">2FA</button>'
                : '';
            container.innerHTML = `
                <div class="profile-hero">
                    <div class="profile-hero-main">
                        <div class="profile-avatar" aria-hidden="true">${escapeHtml(initials)}</div>
                        <div class="profile-hero-text">
                            <h3 class="profile-hero-name">${escapeHtml(me.full_name || me.username)}</h3>
                            <p class="profile-hero-meta">@${escapeHtml(me.username)} · ${escapeHtml(me.email || 'Email не указан')}</p>
                            <div class="profile-hero-chips">
                                <span class="profile-status-chip ${me.is_active ? 'active' : 'inactive'}">
                                    ${me.is_active ? 'Активен' : 'Отключён'}
                                </span>
                                ${roleChips}
                                ${officeChips}
                                <span class="profile-meta-chip">${escapeHtml(authProviderLabel(me.auth_provider))}</span>
                                ${me.totp && me.totp.enabled ? '<span class="profile-meta-chip">2FA включена</span>' : ''}
                                ${me.totp && me.totp.setup_required ? '<span class="profile-status-chip inactive">Требуется 2FA</span>' : ''}
                            </div>
                        </div>
                    </div>
                    <div class="profile-hero-actions">
                        ${notifJump}
                        ${tokensJump}
                        ${totpBtnHtml}
                        <button type="button" class="btn btn-secondary" data-profile-tab-jump="privacy">ПДн</button>
                        ${passwordBtnHtml}
                        <button type="button" id="sessions-btn-profile" class="btn btn-secondary">Сессии</button>
                        <button type="button" id="logout-btn-profile" class="btn btn-danger">Выйти</button>
                    </div>
                </div>

                <div class="profile-tabs" role="tablist" aria-label="Разделы профиля">
                    <button type="button" class="profile-tab is-active" role="tab" id="profile-tab-main" data-profile-tab="main" aria-controls="profile-panel-main" aria-selected="true">Основное</button>
                    <button type="button" class="profile-tab" role="tab" id="profile-tab-privacy" data-profile-tab="privacy" aria-controls="profile-panel-privacy" aria-selected="false" tabindex="-1">Персональные данные</button>
                    <button type="button" class="profile-tab" role="tab" id="profile-tab-notifications" data-profile-tab="notifications" aria-controls="profile-panel-notifications" aria-selected="false" tabindex="-1">Оповещения</button>
                    <button type="button" class="profile-tab" role="tab" id="profile-tab-roles" data-profile-tab="roles" aria-controls="profile-panel-roles" aria-selected="false" tabindex="-1">Роли</button>
                    <button type="button" class="profile-tab" role="tab" id="profile-tab-tokens" data-profile-tab="tokens" aria-controls="profile-panel-tokens" aria-selected="false" tabindex="-1" ${canPat ? '' : 'hidden'}>API-токены</button>
                </div>

                <div class="profile-panel is-active" role="tabpanel" id="profile-panel-main" data-profile-panel="main" aria-labelledby="profile-tab-main">
                ${officeSectionHtml}
                <div class="profile-section">
                    <h3 class="profile-section-title">Основная информация</h3>
                    <p class="profile-section-subtitle">ФИО, контакты, тема интерфейса и приватность</p>
                    <form id="profile-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="profile-full-name">Полное имя</label>
                                <input type="text" id="profile-full-name" value="${escapeHtml(me.full_name || '')}">
                            </div>
                            <div class="form-group">
                                <label for="profile-email">Email</label>
                                <input type="email" id="profile-email" value="${escapeHtml(me.email || '')}">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="profile-first-name">Имя</label>
                                <input type="text" id="profile-first-name" value="${escapeHtml(me.first_name || '')}">
                            </div>
                            <div class="form-group">
                                <label for="profile-last-name">Фамилия</label>
                                <input type="text" id="profile-last-name" value="${escapeHtml(me.last_name || '')}">
                            </div>
                        </div>

                        <div class="profile-form-divider">Контакты и должность</div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="profile-phone">Телефон</label>
                                <input type="text" id="profile-phone" value="${escapeHtml(me.phone || '')}">
                            </div>
                            <div class="form-group">
                                <label for="profile-timezone">Часовой пояс</label>
                                <select id="profile-timezone"></select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="profile-department">Отдел</label>
                                <input type="text" id="profile-department" value="${escapeHtml(me.department || '')}">
                            </div>
                            <div class="form-group">
                                <label for="profile-job-title">Должность</label>
                                <input type="text" id="profile-job-title" value="${escapeHtml(me.job_title || '')}">
                            </div>
                        </div>

                        <div class="profile-form-divider">Тема и приватность</div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="profile-theme-mode">Тема интерфейса</label>
                                <select id="profile-theme-mode">
                                    <option value="light" ${me.theme_mode === 'light' ? 'selected' : ''}>Светлая</option>
                                    <option value="dark" ${me.theme_mode === 'dark' ? 'selected' : ''}>Темная</option>
                                    <option value="violet" ${me.theme_mode === 'violet' ? 'selected' : ''}>Фиолетово-красная</option>
                                    <option value="gothic" ${me.theme_mode === 'gothic' ? 'selected' : ''}>Готическая</option>
                                    <option value="tux" ${me.theme_mode === 'tux' ? 'selected' : ''}>TUX (черно-белая)</option>
                                    <option value="auto" ${!me.theme_mode || me.theme_mode === 'auto' ? 'selected' : ''}>Авто по времени</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="profile-dark-theme-start">Время включения темной темы (авто)</label>
                                <input type="time" id="profile-dark-theme-start" value="${escapeHtml(me.dark_theme_start || '20:00')}">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="profile-dark-theme-end">Время выключения темной темы (авто)</label>
                                <input type="time" id="profile-dark-theme-end" value="${escapeHtml(me.dark_theme_end || '07:00')}">
                            </div>
                            <div class="form-group">
                                <label class="awm-check" for="profile-hidden-profile" style="margin-top:26px;">
                                    <input type="checkbox" class="awm-check__input" id="profile-hidden-profile" ${me.hidden_profile ? 'checked' : ''}>
                                    <span class="awm-check__visual" aria-hidden="true"></span>
                                    <span class="awm-check__text">Скрытый профиль</span>
                                </label>
                                <small class="profile-note">Скрытый профиль: вы не отображаетесь в списках групп (кроме случаев, когда вы создатель группы), не получаете общие уведомления, и вам нельзя написать первым в чате.</small>
                            </div>
                        </div>
                        <small class="profile-note">
                            В режиме «Авто» тёмная тема активна в заданный интервал. Если интервал пересекает полночь (например 20:00–07:00), это учитывается автоматически.
                        </small>

                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">Сохранить профиль</button>
                        </div>
                        <div id="profile-save-status" class="profile-save-status" role="status" aria-live="polite"></div>
                    </form>
                </div>
                </div>

                <div class="profile-panel" role="tabpanel" id="profile-panel-privacy" data-profile-panel="privacy" aria-labelledby="profile-tab-privacy" hidden>
                <div class="profile-section">
                    <h3 class="profile-section-title">Персональные данные</h3>
                    <p class="profile-section-subtitle">Статус согласия, экспорт данных и запросы администратору</p>
                    <div class="privacy-stack">
                        <div class="privacy-block">
                            <h4 class="privacy-block-title">Согласие на обработку</h4>
                            <p class="privacy-block-hint">Подтверждается один раз при первом входе (и при смене версии уведомления).</p>
                            <div class="privacy-meta-row">
                                <span class="profile-status-chip ${me.privacy_notice?.consent_actual ? 'active' : 'inactive'}" id="privacy-notice-status">
                                    ${me.privacy_notice?.consent_actual ? 'Согласие актуально' : 'Требуется подтверждение при входе'}
                                </span>
                                <span class="profile-meta-chip">Версия ${escapeHtml(String(me.privacy_notice?.version || '1'))}</span>
                                <span class="profile-meta-chip" id="privacy-consent-meta">${escapeHtml(me.privacy_notice?.consent_at ? ('Принято: ' + me.privacy_notice.consent_at) : 'Ещё не подтверждено')}</span>
                            </div>
                            <div class="privacy-notice-body" id="privacy-notice-text">${escapeHtml(me.privacy_notice?.text || 'Текст уведомления не задан.')}</div>
                        </div>

                        <div class="privacy-block">
                            <h4 class="privacy-block-title">Экспорт моих данных</h4>
                            <p class="privacy-block-hint">Скачайте JSON со сведениями профиля, сессий, токенов и связанных записей журнала (без секретов).</p>
                            <div class="privacy-actions">
                                <button type="button" class="btn btn-primary" id="privacy-export-btn">Скачать экспорт</button>
                            </div>
                            <p id="privacy-export-status" class="privacy-status-line" style="margin-top:10px;"></p>
                        </div>

                        <div class="privacy-block">
                            <h4 class="privacy-block-title">Запросы администратору</h4>
                            <p class="privacy-block-hint">Деактивация, удаление данных или выгрузка, подготовленная администратором.</p>
                            <div class="form-group">
                                <label for="privacy-request-type">Тип запроса</label>
                                <select id="privacy-request-type">
                                    <option value="deactivate">Деактивировать мой аккаунт</option>
                                    <option value="delete">Запросить удаление данных</option>
                                    <option value="export">Запросить админский экспорт</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="privacy-request-comment">Комментарий</label>
                                <textarea id="privacy-request-comment" class="form-control" rows="3" maxlength="2000" placeholder="Опишите запрос или дополнительные условия"></textarea>
                            </div>
                            <div class="privacy-actions">
                                <button type="button" class="btn btn-primary" id="privacy-request-btn">Отправить запрос</button>
                            </div>
                            <p id="privacy-request-status" class="privacy-status-line" style="margin-top:10px;"></p>
                            <div id="privacy-requests-list" style="margin-top:14px;"><div class="loading">Загрузка запросов...</div></div>
                        </div>
                    </div>
                </div>
                </div>

                <div class="profile-panel" role="tabpanel" id="profile-panel-notifications" data-profile-panel="notifications" aria-labelledby="profile-tab-notifications" hidden>
                <div class="profile-section">
                    <h3 class="profile-section-title">Оповещения</h3>
                    <p class="profile-section-subtitle">Основной канал доставки и параллельные копии на email</p>
                    <form id="notification-settings-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="notif-enabled">Включить персональные оповещения</label>
                                <select id="notif-enabled">
                                    <option value="1">Да</option>
                                    <option value="0">Нет</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="notif-method">Канал доставки</label>
                                <select id="notif-method">
                                    <option value="browser">Браузер</option>
                                    <option value="telegram">Telegram</option>
                                    <option value="max">MAX</option>
                                    <option value="matrix">Matrix</option>
                                    <option value="slack">Slack</option>
                                    <option value="webhook">Webhook</option>
                                </select>
                            </div>
                        </div>
                        <div id="notif-fields-browser" class="notif-fields-group">
                            <small class="profile-note">
                                Для Browser-уведомлений сохраните настройки и нажмите кнопку «Разрешить browser-уведомления».
                            </small>
                        </div>
                        <div id="notif-fields-webhook" class="notif-fields-group">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="notif-webhook-url">Webhook URL</label>
                                    <input type="text" id="notif-webhook-url" placeholder="https://...">
                                </div>
                                <div class="form-group">
                                    <label for="notif-webhook-token">Webhook Token (опционально)</label>
                                    <input type="text" id="notif-webhook-token" placeholder="Bearer token">
                                </div>
                            </div>
                        </div>
                        <div id="notif-fields-telegram" class="notif-fields-group">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="notif-telegram-bot-token">Telegram Bot Token</label>
                                    <input type="text" id="notif-telegram-bot-token" placeholder="123456:ABC...">
                                </div>
                                <div class="form-group">
                                    <label for="notif-telegram-chat-id">Telegram Chat ID</label>
                                    <input type="text" id="notif-telegram-chat-id" placeholder="-1001234567890">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="notif-telegram-proxy">Прокси (опционально)</label>
                                <input type="text" id="notif-telegram-proxy" placeholder="http://user:pass@host:3128 или socks5://host:1080">
                                <small class="profile-note">
                                    Если api.telegram.org недоступен — HTTP(S) или SOCKS5 прокси для отправки в Telegram.
                                </small>
                            </div>
                        </div>
                        <div id="notif-fields-max" class="notif-fields-group">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="notif-max-bot-token">MAX Bot Token</label>
                                    <input type="text" id="notif-max-bot-token" placeholder="max_api_token">
                                </div>
                                <div class="form-group">
                                    <label for="notif-max-chat-id">MAX Chat ID</label>
                                    <input type="text" id="notif-max-chat-id" placeholder="chat_id">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="notif-max-api-url">MAX API URL (опционально)</label>
                                    <input type="text" id="notif-max-api-url" placeholder="https://platform-api.max.ru/messages">
                                </div>
                                <div class="form-group">
                                    <label>Подсказка</label>
                                    <small class="profile-note">
                                        MAX API принимает токен только в заголовке Authorization.
                                    </small>
                                </div>
                            </div>
                        </div>
                        <div id="notif-fields-matrix" class="notif-fields-group">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="notif-matrix-homeserver">Matrix Homeserver</label>
                                    <input type="text" id="notif-matrix-homeserver" placeholder="https://matrix.example.com">
                                </div>
                                <div class="form-group">
                                    <label for="notif-matrix-room-id">Matrix Room ID</label>
                                    <input type="text" id="notif-matrix-room-id" placeholder="!room:example.com">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="notif-matrix-access-token">Matrix Access Token</label>
                                    <input type="text" id="notif-matrix-access-token" placeholder="syt_...">
                                </div>
                            </div>
                        </div>
                        <div class="form-actions profile-notification-actions">
                            <button type="submit" class="btn btn-primary">Сохранить канал</button>
                            <button type="button" class="btn btn-secondary" id="notif-test-btn">Отправить тест</button>
                            <button type="button" class="btn btn-secondary" id="notif-permission-btn">Разрешить browser-уведомления</button>
                        </div>
                    </form>
                    <div class="profile-section" id="notif-email-block" style="margin-top:16px; padding-top:12px; border-top:1px solid var(--border);">
                        <div class="notif-email-heading">
                            <h4 class="notif-email-heading__title">Email (параллельно с каналом)</h4>
                            <span id="notif-email-delivery-badge" class="notif-email-status-badge is-off" role="status" aria-live="polite">
                                <svg class="notif-email-status-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                                    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
                                </svg>
                                <span id="notif-email-delivery-badge-text">Выключена</span>
                            </span>
                        </div>
                        <p class="profile-note" id="notif-email-smtp-hint" style="margin-bottom:10px;">
                            Копии выбранных уведомлений на адрес из профиля. SMTP настраивает администратор глобально.
                        </p>
                        <div class="form-group">
                            <label class="awm-check" for="notif-email-enabled">
                                <input type="checkbox" class="awm-check__input" id="notif-email-enabled">
                                <span class="awm-check__visual" aria-hidden="true"></span>
                                <span class="awm-check__text">Отправлять копии на email</span>
                            </label>
                            <small class="profile-note" id="notif-email-address-hint"></small>
                        </div>
                        <div id="notif-email-events" class="form-group" style="margin-top:10px;"></div>
                        <div class="form-actions" style="margin-top:10px;">
                            <button type="button" class="btn btn-primary btn-sm" id="notif-email-save-btn">Сохранить email</button>
                            <button type="button" class="btn btn-secondary btn-sm" id="notif-email-test-btn">Тест email</button>
                        </div>
                        <div id="notif-email-status" class="profile-note" style="margin-top:8px;"></div>
                    </div>
                </div>
                </div>

                <div class="profile-panel" role="tabpanel" id="profile-panel-roles" data-profile-panel="roles" aria-labelledby="profile-tab-roles" hidden>
                        <div class="profile-section">
                            <h3 class="profile-section-title">Роли</h3>
                            ${rolesHtml}
                            <h3 class="profile-section-title" style="margin-top:16px;">Разрешения</h3>
                            ${permissionsHtml}
                        </div>
                </div>

                <div class="profile-panel" role="tabpanel" id="profile-panel-tokens" data-profile-panel="tokens" aria-labelledby="profile-tab-tokens" hidden>
                <div id="profile-api-tokens-section" class="profile-section">
                    <div class="toolbar" style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px;">
                        <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
                            <h3 class="profile-section-title" style="margin:0;">Постоянные API-токены</h3>
                            <span id="pat-quota-label" class="profile-perm-empty" style="display:none; margin:0;" title="Число активных токенов и лимит, заданный администратором"></span>
                        </div>
                        <button type="button" class="btn btn-primary btn-sm" id="pat-create-btn" title="Создать новый постоянный API-токен">Создать токен</button>
                    </div>
                    <p class="profile-note" style="margin-bottom:12px;">
                        Постоянные токены (PAT) — единственный способ вызывать REST API извне (скрипты, CI, интеграции).
                        Можно приостановить токен, задать расписание (дни и время по часовому поясу профиля) и отозвать.
                        Права токена — подмножество ваших прав; секрет показывается один раз при создании.
                    </p>
                    <div id="profile-api-tokens-list"><div class="loading">Загрузка токенов...</div></div>
                </div>
                </div>
            `;
            window.awmProfileAuthProvider = me.auth_provider || 'local';
            window.awmProfileMe = me;
            if (window.awmTimezones) {
                window.awmTimezones.fillSelect(document.getElementById('profile-timezone'), {
                    value: me.timezone || '',
                    includeEmpty: true,
                    emptyLabel: '— не выбран —',
                });
            }
            const ssoManaged = isSsoManagedAuthProvider(window.awmProfileAuthProvider);
            if (ssoManaged) {
                ['profile-full-name', 'profile-email', 'profile-first-name', 'profile-last-name'].forEach((id) => {
                    const el = document.getElementById(id);
                    if (el) el.readOnly = true;
                });
                const hp = document.getElementById('profile-hidden-profile');
                if (hp) hp.disabled = true;
            }
            document.getElementById('logout-btn-profile').addEventListener('click', logoutProfile);
            const sessionsBtn = document.getElementById('sessions-btn-profile');
            if (sessionsBtn) sessionsBtn.addEventListener('click', openSessionsModal);
            const changePasswordBtn = document.getElementById('change-password-btn');
            if (changePasswordBtn && !ssoManaged) {
                changePasswordBtn.addEventListener('click', openPasswordModal);
            }
            const totpBtn = document.getElementById('totp-btn-profile');
            if (totpBtn) totpBtn.addEventListener('click', () => openTotpManageModal(me));
            window.__awmProfileMe = me;
            document.getElementById('profile-form').addEventListener('submit', saveProfile);
            const themeSelect = document.getElementById('profile-theme-mode');
            if (themeSelect) {
                themeSelect.addEventListener('change', applyProfileThemePreview);
            }
            document.getElementById('notification-settings-form').addEventListener('submit', saveNotificationSettings);
            document.getElementById('notif-test-btn').addEventListener('click', sendNotificationTest);
            document.getElementById('notif-permission-btn').addEventListener('click', requestBrowserNotificationPermission);
            document.getElementById('notif-method').addEventListener('change', updateNotificationMethodFields);
            const emailSaveBtn = document.getElementById('notif-email-save-btn');
            if (emailSaveBtn) emailSaveBtn.addEventListener('click', saveEmailNotificationSettings);
            const emailTestBtn = document.getElementById('notif-email-test-btn');
            if (emailTestBtn) emailTestBtn.addEventListener('click', sendEmailNotificationTest);
            const privacyExportBtn = document.getElementById('privacy-export-btn');
            if (privacyExportBtn) privacyExportBtn.addEventListener('click', exportPersonalData);
            const privacyRequestBtn = document.getElementById('privacy-request-btn');
            if (privacyRequestBtn) privacyRequestBtn.addEventListener('click', submitPersonalDataRequest);
            initProfileTabs();
            loadPersonalDataRequests();
            if (canPat) {
                const patCreateBtn = document.getElementById('pat-create-btn');
                if (patCreateBtn) patCreateBtn.addEventListener('click', openPatCreateModal);
            }
            if (window.__awmProfileSaveFlash) {
                setProfileSaveStatus(window.__awmProfileSaveFlash, 'ok');
                window.__awmProfileSaveFlash = '';
            }
            if (new URLSearchParams(window.location.search).get('totp_setup') === '1' && me.totp && me.totp.feature_enabled && !me.totp.enabled) {
                openTotpManageModal(me);
                startTotpSetup();
            }
        } catch (e) {
            container.innerHTML = `<div class="empty-state">Ошибка: ${e.message}</div>`;
        }
    }

    function setTotpStatusMessage(el, message, kind) {
        if (!el) return;
        el.classList.remove('is-error', 'is-pending');
        el.textContent = message || '';
        if (!message) return;
        if (kind === 'error') el.classList.add('is-error');
        else if (kind === 'pending') el.classList.add('is-pending');
    }

    function markOtpDigitsInvalid(rootId, invalid) {
        const root = document.getElementById(rootId);
        if (!root) return;
        root.classList.toggle('is-invalid', !!invalid);
    }

    function showTotpModalOverlay() {
        const overlay = document.getElementById('totp-modal-overlay');
        if (!overlay) return;
        overlay.classList.add('show');
        overlay.setAttribute('aria-hidden', 'false');
    }

    function setTotpModalMode(mode) {
        const manage = document.getElementById('totp-manage-panel');
        const setup = document.getElementById('totp-setup-panel');
        const disable = document.getElementById('totp-disable-panel');
        const title = document.getElementById('totp-modal-title');
        if (manage) manage.hidden = mode !== 'manage';
        if (setup) setup.hidden = mode !== 'setup';
        if (disable) disable.hidden = mode !== 'disable';
        if (title) {
            if (mode === 'setup') title.textContent = 'Подключение 2FA';
            else if (mode === 'disable') title.textContent = 'Отключение 2FA';
            else title.textContent = 'Двухфакторная аутентификация';
        }
    }

    let totpConfirmDigits = null;
    let totpDisableDigits = null;

    function ensureTotpDigitControllers() {
        if (!window.AwmOtpDigits) return;
        if (!totpConfirmDigits) {
            const root = document.getElementById('totp-confirm-code-digits');
            if (root) totpConfirmDigits = window.AwmOtpDigits.bind(root);
        }
        if (!totpDisableDigits) {
            const root = document.getElementById('totp-disable-code-digits');
            if (root) totpDisableDigits = window.AwmOtpDigits.bind(root);
        }
    }

    function openTotpManageModal(me) {
        const profile = me || window.__awmProfileMe;
        if (!profile) return;
        ensureTotpDigitControllers();
        renderTotpManagePanel(profile);
        setTotpModalMode('manage');
        setTotpStatusMessage(document.getElementById('totp-manage-status'), '');
        markOtpDigitsInvalid('totp-confirm-code-digits', false);
        markOtpDigitsInvalid('totp-disable-code-digits', false);
        showTotpModalOverlay();
    }

    function totpStatusIconSvg(kind) {
        if (kind === 'on') {
            return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.5-2.8 7.8-7 9-4.2-1.2-7-4.5-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg>';
        }
        if (kind === 'warn') {
            return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.5-2.8 7.8-7 9-4.2-1.2-7-4.5-7-9V6l7-3z"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg>';
        }
        return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.5-2.8 7.8-7 9-4.2-1.2-7-4.5-7-9V6l7-3z"/><path d="M9.5 12h5"/></svg>';
    }

    function renderTotpStatusCard(state, label, title, text) {
        const card = document.getElementById('totp-manage-status-card');
        if (!card) return;
        const iconKind = state === 'on' ? 'on' : (state === 'warn' ? 'warn' : 'off');
        card.dataset.state = state || 'muted';
        card.innerHTML = `
            <div class="totp-status-card__icon">${totpStatusIconSvg(iconKind)}</div>
            <div class="totp-status-card__body">
                <span class="totp-status-card__label">${escapeHtml(label)}</span>
                <h4 class="totp-status-card__title">${escapeHtml(title)}</h4>
                <p class="totp-status-card__text">${escapeHtml(text)}</p>
            </div>
        `;
    }

    function renderTotpManagePanel(me) {
        const actions = document.getElementById('totp-manage-actions');
        if (!actions) return;
        const totp = (me && me.totp) || {};
        const local = !isSsoManagedAuthProvider((me && me.auth_provider) || 'local');
        if (!totp.feature_enabled) {
            renderTotpStatusCard(
                'muted',
                'Недоступна',
                'Функция отключена администратором',
                'Двухфакторная аутентификация выключена в политиках безопасности. Обратитесь к администратору.'
            );
            actions.innerHTML = '';
            return;
        }
        if (!local) {
            renderTotpStatusCard(
                'muted',
                'SSO',
                'Настраивается у поставщика входа',
                'Для учётной записи единого входа второй фактор задаётся в Keycloak (или другом IdP), не в профиле AWM.'
            );
            actions.innerHTML = '';
            return;
        }
        if (totp.enabled) {
            renderTotpStatusCard(
                'on',
                'Подключена',
                'Двухфакторная защита активна',
                'При входе по паролю потребуется шестизначный код из приложения-аутентификатора.'
            );
            if (!totp.required) {
                actions.innerHTML = '<button type="button" class="btn btn-secondary" id="totp-disable-btn">Отключить 2FA</button>';
            } else {
                actions.innerHTML = '<p class="profile-note">По политике безопасности отключение недоступно. Сброс выполняет администратор.</p>';
            }
        } else if (totp.setup_required) {
            renderTotpStatusCard(
                'warn',
                'Требуется настройка',
                'Подключите приложение-аутентификатор',
                'Администратор обязал использовать 2FA. До завершения настройки доступ ограничен профилем.'
            );
            actions.innerHTML = '<button type="button" class="btn btn-primary" id="totp-setup-btn">Подключить 2FA</button>';
        } else {
            renderTotpStatusCard(
                'off',
                'Не подключена',
                'Дополнительная защита не настроена',
                'Подключите приложение-аутентификатор: при входе по паролю будет запрашиваться код.'
            );
            actions.innerHTML = '<button type="button" class="btn btn-primary" id="totp-setup-btn">Подключить 2FA</button>';
        }
        const setupBtn = document.getElementById('totp-setup-btn');
        if (setupBtn) setupBtn.addEventListener('click', startTotpSetup);
        const disableBtn = document.getElementById('totp-disable-btn');
        if (disableBtn) disableBtn.addEventListener('click', openTotpDisablePanel);
    }

    function closeTotpModal() {
        const overlay = document.getElementById('totp-modal-overlay');
        if (!overlay) return;
        overlay.classList.remove('show');
        overlay.setAttribute('aria-hidden', 'true');
        setTotpModalMode('manage');
        if (totpConfirmDigits) totpConfirmDigits.clear();
        if (totpDisableDigits) totpDisableDigits.clear();
        markOtpDigitsInvalid('totp-confirm-code-digits', false);
        markOtpDigitsInvalid('totp-disable-code-digits', false);
        setTotpStatusMessage(document.getElementById('totp-modal-status'), '');
        setTotpStatusMessage(document.getElementById('totp-disable-status'), '');
        setTotpStatusMessage(document.getElementById('totp-manage-status'), '');
    }

    function backFromTotpSetup() {
        setTotpModalMode('manage');
        setTotpStatusMessage(document.getElementById('totp-modal-status'), '');
        markOtpDigitsInvalid('totp-confirm-code-digits', false);
        if (totpConfirmDigits) totpConfirmDigits.clear();
        if (window.__awmProfileMe) renderTotpManagePanel(window.__awmProfileMe);
    }

    function openTotpDisablePanel() {
        ensureTotpDigitControllers();
        setTotpModalMode('disable');
        setTotpStatusMessage(document.getElementById('totp-disable-status'), '');
        markOtpDigitsInvalid('totp-disable-code-digits', false);
        if (totpDisableDigits) {
            totpDisableDigits.clear();
            totpDisableDigits.focus();
        }
    }

    function backFromTotpDisable() {
        setTotpModalMode('manage');
        setTotpStatusMessage(document.getElementById('totp-disable-status'), '');
        markOtpDigitsInvalid('totp-disable-code-digits', false);
        if (totpDisableDigits) totpDisableDigits.clear();
        if (window.__awmProfileMe) renderTotpManagePanel(window.__awmProfileMe);
    }

    async function startTotpSetup() {
        ensureTotpDigitControllers();
        const status = document.getElementById('totp-modal-status');
        const qrWrap = document.getElementById('totp-qr-wrap');
        const secretEl = document.getElementById('totp-manual-secret');
        setTotpModalMode('setup');
        showTotpModalOverlay();
        setTotpStatusMessage(status, 'Подготовка…', 'pending');
        markOtpDigitsInvalid('totp-confirm-code-digits', false);
        if (totpConfirmDigits) totpConfirmDigits.clear();
        try {
            const response = await fetch('/api/auth/me/totp/setup', { method: 'POST' });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) throw new Error(data.detail || 'Не удалось начать настройку 2FA');
            if (secretEl) secretEl.value = data.secret || '';
            if (qrWrap) {
                qrWrap.innerHTML = data.qr_png_base64
                    ? `<img src="data:image/png;base64,${data.qr_png_base64}" alt="QR-код 2FA">`
                    : '';
            }
            setTotpStatusMessage(status, '');
            if (totpConfirmDigits) totpConfirmDigits.focus();
        } catch (e) {
            setTotpStatusMessage(status, e.message || String(e), 'error');
            awmAlert(e.message || String(e));
            backFromTotpSetup();
        }
    }

    async function confirmTotpSetup() {
        ensureTotpDigitControllers();
        const status = document.getElementById('totp-modal-status');
        const code = String(totpConfirmDigits ? totpConfirmDigits.getValue() : '').trim();
        if (code.length !== 6) {
            setTotpStatusMessage(status, 'Введите шестизначный код из приложения', 'error');
            markOtpDigitsInvalid('totp-confirm-code-digits', true);
            if (totpConfirmDigits) totpConfirmDigits.focus();
            return;
        }
        setTotpStatusMessage(status, 'Проверка…', 'pending');
        markOtpDigitsInvalid('totp-confirm-code-digits', false);
        try {
            const response = await fetch('/api/auth/me/totp/confirm', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ code }),
            });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) throw new Error(data.detail || 'Неверный код подтверждения');
            closeTotpModal();
            window.__awmProfileSaveFlash = 'Двухфакторная аутентификация включена';
            if (window.history && window.history.replaceState) {
                const url = new URL(window.location.href);
                url.searchParams.delete('totp_setup');
                window.history.replaceState({}, '', url.pathname + url.search);
            }
            await loadProfile();
        } catch (e) {
            setTotpStatusMessage(status, e.message || String(e), 'error');
            markOtpDigitsInvalid('totp-confirm-code-digits', true);
            if (totpConfirmDigits) totpConfirmDigits.clear();
        }
    }

    async function disableTotpFromProfile() {
        ensureTotpDigitControllers();
        const status = document.getElementById('totp-disable-status');
        const code = String(totpDisableDigits ? totpDisableDigits.getValue() : '').trim();
        if (code.length !== 6) {
            setTotpStatusMessage(status, 'Введите шестизначный код из приложения', 'error');
            markOtpDigitsInvalid('totp-disable-code-digits', true);
            if (totpDisableDigits) totpDisableDigits.focus();
            return;
        }
        setTotpStatusMessage(status, 'Проверка…', 'pending');
        markOtpDigitsInvalid('totp-disable-code-digits', false);
        try {
            const response = await fetch('/api/auth/me/totp/disable', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ code }),
            });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) throw new Error(data.detail || 'Не удалось отключить 2FA');
            closeTotpModal();
            window.__awmProfileSaveFlash = 'Двухфакторная аутентификация отключена';
            await loadProfile();
        } catch (e) {
            setTotpStatusMessage(status, e.message || String(e), 'error');
            markOtpDigitsInvalid('totp-disable-code-digits', true);
            if (totpDisableDigits) totpDisableDigits.clear();
            else awmAlert(e.message || String(e));
        }
    }

    document.getElementById('totp-modal-close')?.addEventListener('click', closeTotpModal);
    document.getElementById('totp-modal-cancel')?.addEventListener('click', backFromTotpSetup);
    document.getElementById('totp-confirm-btn')?.addEventListener('click', confirmTotpSetup);
    document.getElementById('totp-disable-cancel')?.addEventListener('click', backFromTotpDisable);
    document.getElementById('totp-disable-confirm-btn')?.addEventListener('click', disableTotpFromProfile);

    function applyProfileThemePreview() {
        const themeSelect = document.getElementById('profile-theme-mode');
        if (!themeSelect) return;
        if (typeof bumpAuthMeThemeSeq === 'function') {
            bumpAuthMeThemeSeq();
        } else {
            window.__awmAuthMeSeq = (window.__awmAuthMeSeq || 0) + 1;
        }
        window.awmThemePreferences = {
            theme_mode: themeSelect.value,
            dark_theme_start: document.getElementById('profile-dark-theme-start')?.value || '20:00',
            dark_theme_end: document.getElementById('profile-dark-theme-end')?.value || '07:00',
        };
        try {
            localStorage.setItem('awm-theme-preferences', JSON.stringify(window.awmThemePreferences));
            localStorage.removeItem('awm_theme_preferences');
        } catch (e) {}
        if (typeof applyUserThemePreferences === 'function') {
            applyUserThemePreferences(window.awmThemePreferences);
        }
    }

    function renderPersonalDataRequests(items) {
        const box = document.getElementById('privacy-requests-list');
        if (!box) return;
        const rows = Array.isArray(items) ? items : [];
        const requestTypeLabel = (value) => ({
            deactivate: 'Деактивация аккаунта',
            delete: 'Удаление данных',
            export: 'Админский экспорт',
        }[String(value || '').toLowerCase()] || '—');
        const statusLabel = (value) => ({
            pending: 'Ожидает обработки',
            completed: 'Выполнен',
            rejected: 'Отклонён',
        }[String(value || '').toLowerCase()] || '—');
        if (!rows.length) {
            box.innerHTML = '<div class="empty-state">Запросы отсутствуют</div>';
            return;
        }
        box.innerHTML = `
            <div style="overflow-x:auto;">
                <table class="profile-api-tokens-table data-table">
                    <thead>
                        <tr>
                            <th>Тип</th>
                            <th>Статус</th>
                            <th>Создан</th>
                            <th>Комментарий</th>
                            <th>Ответ администратора</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        ${rows.map((item) => `
                            <tr>
                                <td>${escapeHtml(requestTypeLabel(item.request_type))}</td>
                                <td>${escapeHtml(statusLabel(item.status))}</td>
                                <td>${escapeHtml(item.requested_at || item.created_at || '—')}</td>
                                <td>${escapeHtml(item.request_comment || '—')}</td>
                                <td style="white-space:pre-wrap;">${escapeHtml(item.admin_comment || '—')}</td>
                                <td>
                                    ${item.download_available
                                        ? `<button type="button" class="btn btn-primary btn-sm" data-pd-download-url="${escapeHtml(item.download_path || item.download_url || '')}" onclick="downloadPersonalDataRequestExport(this, ${Number(item.id)})">Скачать выгрузку</button>`
                                        : '—'}
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        `;
    }

    async function downloadPersonalDataRequestExport(buttonEl, requestId) {
        const status = document.getElementById('privacy-export-status');
        try {
            if (status) status.textContent = 'Скачивание выгрузки...';
            const url = (buttonEl && buttonEl.getAttribute('data-pd-download-url'))
                || `/api/auth/me/personal-data/requests/${requestId}/download`;
            const response = await fetch(url);
            if (!response.ok) {
                const err = await response.json().catch(() => ({ detail: 'Не удалось скачать выгрузку' }));
                throw new Error(err.detail || 'Не удалось скачать выгрузку');
            }
            const blob = await response.blob();
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = `awm-personal-data-request-${requestId}.json`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(a.href);
            if (status) status.textContent = 'Выгрузка скачана.';
        } catch (e) {
            if (status) status.textContent = e.message || 'Не удалось скачать выгрузку';
        }
    }

    async function loadPersonalDataRequests() {
        const box = document.getElementById('privacy-requests-list');
        if (!box) return;
        try {
            const response = await fetch('/api/auth/me/personal-data/requests');
            if (!response.ok) throw new Error('Не удалось загрузить запросы');
            const data = await response.json();
            renderPersonalDataRequests(data.items || []);
        } catch (e) {
            box.innerHTML = `<div class="empty-state">Ошибка: ${escapeHtml(e.message || 'Не удалось загрузить запросы')}</div>`;
        }
    }

    async function exportPersonalData() {
        const status = document.getElementById('privacy-export-status');
        if (status) status.textContent = 'Постановка задачи выгрузки...';
        try {
            const startedResp = await fetch('/api/auth/me/personal-data/export/jobs', { method: 'POST' });
            const started = await startedResp.json().catch(() => ({}));
            if (!startedResp.ok) {
                throw new Error(started.detail || 'Не удалось запустить выгрузку');
            }
            if (!started.job_id) throw new Error('Не получен идентификатор задачи');
            if (status) {
                status.textContent = started.backend === 'celery'
                    ? 'В очереди Celery…'
                    : 'Формирование выгрузки…';
            }
            const poll = async () => {
                const stResp = await fetch(`/api/auth/me/personal-data/export/jobs/${encodeURIComponent(started.job_id)}`);
                const st = await stResp.json().catch(() => ({}));
                if (!stResp.ok) throw new Error(st.detail || 'Не удалось получить статус выгрузки');
                if (st.status === 'completed') return st;
                if (st.status === 'failed') throw new Error(st.error || 'Ошибка формирования выгрузки');
                if (status && st.message) status.textContent = st.message;
                await new Promise((r) => setTimeout(r, 1500));
                return poll();
            };
            const done = await poll();
            const downloadUrl = done.download_url
                || `/api/auth/me/personal-data/export/jobs/${encodeURIComponent(started.job_id)}/download`;
            const response = await fetch(downloadUrl);
            if (!response.ok) {
                const err = await response.json().catch(() => ({ detail: 'Не удалось скачать выгрузку' }));
                throw new Error(err.detail || 'Не удалось скачать выгрузку');
            }
            const blob = await response.blob();
            const cd = response.headers.get('Content-Disposition') || '';
            const match = cd.match(/filename="?([^";\n]+)"?/);
            const filename = match
                ? match[1]
                : `awm-personal-data-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.json`;
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(url);
            if (status) status.textContent = 'Экспорт выгружен.';
        } catch (e) {
            if (status) status.textContent = e.message || 'Ошибка экспорта';
        }
    }

    async function submitPersonalDataRequest() {
        const status = document.getElementById('privacy-request-status');
        if (status) status.textContent = 'Отправка...';
        const payload = {
            request_type: document.getElementById('privacy-request-type')?.value || 'deactivate',
            request_comment: (document.getElementById('privacy-request-comment')?.value || '').trim() || null,
        };
        const response = await fetch('/api/auth/me/personal-data/requests', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        if (!response.ok) {
            const err = await response.json().catch(() => ({ detail: 'Не удалось отправить запрос' }));
            if (status) status.textContent = err.detail || 'Не удалось отправить запрос';
            return;
        }
        if (status) status.textContent = 'Запрос отправлен администратору.';
        const comment = document.getElementById('privacy-request-comment');
        if (comment) comment.value = '';
        await loadPersonalDataRequests();
    }

    async function saveProfile(e) {
        e.preventDefault();
        const fullPayload = {
            full_name: document.getElementById('profile-full-name').value.trim() || null,
            email: document.getElementById('profile-email').value.trim() || null,
            first_name: document.getElementById('profile-first-name').value.trim() || null,
            last_name: document.getElementById('profile-last-name').value.trim() || null,
            phone: document.getElementById('profile-phone').value.trim() || null,
            timezone: document.getElementById('profile-timezone').value.trim() || null,
            department: document.getElementById('profile-department').value.trim() || null,
            job_title: document.getElementById('profile-job-title').value.trim() || null,
            hidden_profile: !!document.getElementById('profile-hidden-profile').checked,
            theme_mode: document.getElementById('profile-theme-mode').value,
            dark_theme_start: document.getElementById('profile-dark-theme-start').value || '20:00',
            dark_theme_end: document.getElementById('profile-dark-theme-end').value || '07:00'
        };
        const payload = isSsoManagedAuthProvider(window.awmProfileAuthProvider)
            ? {
                phone: fullPayload.phone,
                timezone: fullPayload.timezone,
                department: fullPayload.department,
                job_title: fullPayload.job_title,
                theme_mode: fullPayload.theme_mode,
                dark_theme_start: fullPayload.dark_theme_start,
                dark_theme_end: fullPayload.dark_theme_end,
            }
            : fullPayload;
        const response = await fetch('/api/auth/me', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        if (!response.ok) {
            const err = await response.json().catch(() => ({ detail: 'Ошибка сохранения профиля' }));
            setProfileSaveStatus(err.detail || 'Ошибка сохранения профиля', 'error');
            return;
        }
        if (typeof bumpAuthMeThemeSeq === 'function') {
            bumpAuthMeThemeSeq();
        } else {
            window.__awmAuthMeSeq = (window.__awmAuthMeSeq || 0) + 1;
        }
        window.awmThemePreferences = {
            theme_mode: payload.theme_mode,
            dark_theme_start: payload.dark_theme_start,
            dark_theme_end: payload.dark_theme_end,
        };
        try {
            localStorage.setItem('awm-theme-preferences', JSON.stringify(window.awmThemePreferences));
            localStorage.removeItem('awm_theme_preferences');
        } catch (e) {}
        if (typeof applyUserThemePreferences === 'function') {
            applyUserThemePreferences(window.awmThemePreferences);
        }
        window.__awmProfileSaveFlash = 'Профиль обновлён';
        await loadProfile();
    }

    function notifyRemoteDesktopForceClose() {
        const payload = { channel: 'awm-rdp-session', type: 'force-close-all' };
        try {
            if (typeof BroadcastChannel === 'function') {
                const ch = new BroadcastChannel('awm-rdp-session');
                ch.postMessage(payload);
                ch.close();
            }
        } catch (e) { /* ignore */ }
        try {
            if (window.opener && !window.opener.closed) {
                window.opener.postMessage(payload, window.location.origin);
            }
        } catch (e2) { /* ignore */ }
    }

    async function performLogout() {
        notifyRemoteDesktopForceClose();
        try {
            await fetch('/api/auth/logout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
        } catch (e) {}
        window.location.href = '/login';
    }

    async function logoutProfile() {
        const ok = await (window.awmConfirm
            ? awmConfirm(
                'Выйти из AWM? Открытые удалённые рабочие столы будут отключены.',
                'Выход'
            )
            : Promise.resolve(window.confirm('Выйти из AWM?')));
        if (!ok) return;
        await performLogout();
    }

    function setSessionsStatus(text, isError) {
        const el = document.getElementById('sessions-status');
        if (!el) return;
        el.textContent = text || '';
        el.classList.toggle('is-error', !!isError);
    }

    function formatSessionWhen(value) {
        if (!value) return '—';
        try {
            const d = new Date(value);
            if (Number.isNaN(d.getTime())) return String(value);
            return d.toLocaleString();
        } catch (e) {
            return String(value);
        }
    }

    function shortUserAgent(ua) {
        const raw = String(ua || '').trim();
        if (!raw) return 'Неизвестное устройство';
        if (raw.length <= 96) return raw;
        return raw.slice(0, 93) + '…';
    }

    async function loadSessionsList() {
        const list = document.getElementById('sessions-list');
        if (!list) return;
        list.innerHTML = '<div class="profile-sessions-empty">Загрузка…</div>';
        setSessionsStatus('');
        try {
            const response = await fetch('/api/auth/me/sessions');
            if (!response.ok) {
                const err = await response.json().catch(() => ({}));
                throw new Error(err.detail || 'Не удалось загрузить сессии');
            }
            const data = await response.json();
            const items = Array.isArray(data.items) ? data.items : [];
            if (!items.length) {
                list.innerHTML = '<div class="profile-sessions-empty">Активных сессий нет</div>';
                return;
            }
            list.innerHTML = items.map((item) => {
                const id = escapeHtml(item.id || '');
                const current = !!item.is_current;
                const ip = escapeHtml(item.ip_address || '—');
                const ua = escapeHtml(shortUserAgent(item.user_agent));
                const created = escapeHtml(formatSessionWhen(item.created_at));
                const activity = escapeHtml(formatSessionWhen(item.last_activity_at));
                const badge = current ? '<span class="profile-meta-chip">Текущая</span>' : '';
                return (
                    `<div class="profile-session-row${current ? ' is-current' : ''}" data-session-id="${id}" data-is-current="${current ? '1' : '0'}">`
                    + '<div class="profile-session-main">'
                    + `<p class="profile-session-title">${ua} ${badge}</p>`
                    + `<p class="profile-session-meta">IP: ${ip}<br>Создана: ${created}<br>Активность: ${activity}</p>`
                    + '</div>'
                    + '<div class="profile-session-actions">'
                    + `<button type="button" class="btn btn-danger btn-sm" data-session-revoke="${id}" data-is-current="${current ? '1' : '0'}">Завершить</button>`
                    + '</div></div>'
                );
            }).join('');
            list.querySelectorAll('[data-session-revoke]').forEach((btn) => {
                btn.addEventListener('click', () => {
                    revokeSessionById(
                        btn.getAttribute('data-session-revoke'),
                        btn.getAttribute('data-is-current') === '1'
                    );
                });
            });
        } catch (e) {
            list.innerHTML = `<div class="profile-sessions-empty">${escapeHtml(e.message || String(e))}</div>`;
            setSessionsStatus(e.message || String(e), true);
        }
    }

    function openSessionsModal() {
        const overlay = document.getElementById('sessions-modal-overlay');
        if (!overlay) return;
        overlay.classList.add('show');
        overlay.setAttribute('aria-hidden', 'false');
        applySingleSessionControls(window.__awmProfileMe);
        loadSessionsList();
    }

    function applySingleSessionControls(me) {
        const ss = (me && me.single_session) || {};
        const card = document.getElementById('single-session-card');
        const cb = document.getElementById('single-session-enabled');
        const hint = document.getElementById('single-session-hint');
        const status = document.getElementById('single-session-status');
        if (status) {
            status.textContent = '';
            status.classList.remove('is-error', 'is-pending');
        }
        if (card) {
            card.dataset.state = ss.effective ? 'on' : 'off';
        }
        if (hint) {
            if (ss.global_enabled) {
                hint.textContent = 'Администратор включил односессионный режим для всех. Персонально отключить нельзя.';
            } else {
                hint.textContent = 'При повторном входе предыдущие сессии этой учётки будут завершены.';
            }
        }
        if (cb) {
            cb.checked = !!(ss.personal_enabled || ss.global_enabled);
            cb.disabled = !!ss.personal_locked;
        }
    }

    async function saveSingleSessionPreference() {
        const cb = document.getElementById('single-session-enabled');
        const status = document.getElementById('single-session-status');
        if (!cb || cb.disabled) return;
        if (status) {
            status.textContent = 'Сохранение…';
            status.classList.remove('is-error');
            status.classList.add('is-pending');
        }
        try {
            const response = await fetch('/api/auth/me', {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ single_session_enabled: !!cb.checked }),
            });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) throw new Error(data.detail || 'Не удалось сохранить настройку');
            window.__awmProfileMe = data;
            applySingleSessionControls(data);
            if (status) {
                status.textContent = 'Сохранено';
                status.classList.remove('is-pending', 'is-error');
            }
        } catch (e) {
            if (status) {
                status.textContent = e.message || String(e);
                status.classList.remove('is-pending');
                status.classList.add('is-error');
            }
            applySingleSessionControls(window.__awmProfileMe);
        }
    }

    function closeSessionsModal() {
        const overlay = document.getElementById('sessions-modal-overlay');
        if (!overlay) return;
        overlay.classList.remove('show');
        overlay.setAttribute('aria-hidden', 'true');
    }

    async function revokeSessionById(sessionId, isCurrentFlag) {
        const sid = String(sessionId || '').trim();
        if (!sid) return;
        const isCurrent = !!isCurrentFlag;
        if (isCurrent) {
            const ok = await (window.awmConfirm
                ? awmConfirm(
                    'Завершить текущую сессию? Будет выполнен выход из AWM, открытые удалённые рабочие столы будут отключены.',
                    'Завершение текущей сессии'
                )
                : Promise.resolve(window.confirm('Завершить текущую сессию и выйти?')));
            if (!ok) return;
            notifyRemoteDesktopForceClose();
        } else {
            const ok = await (window.awmConfirm
                ? awmConfirm('Завершить эту сессию входа?', 'Завершение сессии')
                : Promise.resolve(window.confirm('Завершить эту сессию?')));
            if (!ok) return;
        }
        setSessionsStatus('Завершение…');
        try {
            const response = await fetch(`/api/auth/me/sessions/${encodeURIComponent(sid)}/revoke`, { method: 'POST' });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                throw new Error(data.detail || 'Не удалось завершить сессию');
            }
            if (data.logout || data.was_current) {
                window.location.href = '/login';
                return;
            }
            setSessionsStatus('Сессия завершена.');
            await loadSessionsList();
        } catch (e) {
            setSessionsStatus(e.message || String(e), true);
        }
    }

    async function revokeOtherSessions() {
        const ok = await (window.awmConfirm
            ? awmConfirm(
                'Завершить все сессии входа, кроме текущей? Устройства потеряют доступ к AWM. Открытые на этом устройстве удалённые рабочие столы не будут отключены.',
                'Завершить другие сессии'
            )
            : Promise.resolve(window.confirm('Завершить все сессии, кроме текущей?')));
        if (!ok) return;
        setSessionsStatus('Завершение…');
        try {
            const response = await fetch('/api/auth/me/sessions/revoke-others', { method: 'POST' });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                throw new Error(data.detail || 'Не удалось завершить сессии');
            }
            const n = Number(data.revoked || 0);
            setSessionsStatus(n ? `Завершено сессий: ${n}.` : 'Других активных сессий не было.');
            await loadSessionsList();
        } catch (e) {
            setSessionsStatus(e.message || String(e), true);
        }
    }

    function openPasswordModal() {
        const overlay = document.getElementById('password-modal-overlay');
        const form = document.getElementById('password-change-form');
        if (!overlay || !form) return;
        form.reset();
        overlay.classList.add('show');
        overlay.setAttribute('aria-hidden', 'false');
        const currentInput = document.getElementById('current-password');
        if (currentInput) {
            currentInput.focus();
        }
    }

    function closePasswordModal() {
        const overlay = document.getElementById('password-modal-overlay');
        if (!overlay) return;
        overlay.classList.remove('show');
        overlay.setAttribute('aria-hidden', 'true');
    }

    async function submitPasswordChange(e) {
        e.preventDefault();
        const currentPassword = document.getElementById('current-password').value;
        const newPassword = document.getElementById('new-password').value;
        const confirmPassword = document.getElementById('confirm-password').value;
        if (newPassword !== confirmPassword) {
            alert('Подтверждение пароля не совпадает');
            return;
        }
        const response = await fetch('/api/auth/me/change-password', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                current_password: currentPassword,
                new_password: newPassword
            })
        });
        if (!response.ok) {
            const err = await response.json().catch(() => ({ detail: 'Ошибка смены пароля' }));
            alert(err.detail || 'Ошибка смены пароля');
            return;
        }
        alert('Пароль изменен. Необходимо войти заново.');
        await performLogout();
    }

    function getNotificationPayloadFromForm() {
        const method = document.getElementById('notif-method').value;
        const config = {};
        if (method === 'webhook' || method === 'slack') {
            config.webhook_url = document.getElementById('notif-webhook-url').value.trim();
            config.webhook_token = document.getElementById('notif-webhook-token').value.trim();
        } else if (method === 'telegram') {
            config.telegram_bot_token = document.getElementById('notif-telegram-bot-token').value.trim();
            config.telegram_chat_id = document.getElementById('notif-telegram-chat-id').value.trim();
            config.telegram_proxy_url = document.getElementById('notif-telegram-proxy').value.trim();
        } else if (method === 'max') {
            config.max_bot_token = document.getElementById('notif-max-bot-token').value.trim();
            config.max_chat_id = document.getElementById('notif-max-chat-id').value.trim();
            config.max_api_url = document.getElementById('notif-max-api-url').value.trim();
        } else if (method === 'matrix') {
            config.matrix_homeserver = document.getElementById('notif-matrix-homeserver').value.trim();
            config.matrix_room_id = document.getElementById('notif-matrix-room-id').value.trim();
            config.matrix_access_token = document.getElementById('notif-matrix-access-token').value.trim();
        }
        // Сохраняем email-prefs вместе с каналом, чтобы не затереть config_json.
        const emailEnabledEl = document.getElementById('notif-email-enabled');
        if (emailEnabledEl) {
            config.email_enabled = Boolean(emailEnabledEl.checked);
            config.email_events = collectEmailEventsFromForm();
        }
        return {
            is_enabled: document.getElementById('notif-enabled').value === '1',
            method,
            config,
            email_enabled: config.email_enabled,
            email_events: config.email_events,
        };
    }

    function collectEmailEventsFromForm() {
        const root = document.getElementById('notif-email-events');
        if (!root) return [];
        return Array.from(root.querySelectorAll('input[type="checkbox"][data-email-event]:checked'))
            .map((el) => String(el.getAttribute('data-email-event') || '').trim())
            .filter(Boolean);
    }

    function renderEmailEventCatalog(data) {
        const root = document.getElementById('notif-email-events');
        if (!root) return;
        const catalog = Array.isArray(data.email_event_catalog) ? data.email_event_catalog : [];
        const selected = new Set(
            Array.isArray(data.email_events) && data.email_events.length
                ? data.email_events
                : (data.email_default_events || [])
        );
        const groups = {};
        catalog.forEach((item) => {
            const group = String((item && item.group) || 'Прочее');
            if (!groups[group]) groups[group] = [];
            groups[group].push(item);
        });
        let html = '<div class="awm-check-section-title">Какие уведомления слать на email</div>';
        html += '<div class="awm-check-grid">';
        Object.keys(groups).forEach((group) => {
            html += `<div class="awm-check-group"><div class="awm-check-group-title">${escapeHtml(group)}</div>`;
            html += '<div class="awm-check-list">';
            groups[group].forEach((item) => {
                const id = String((item && item.id) || '');
                const title = String((item && item.title) || id);
                const checked = selected.has(id) ? ' checked' : '';
                const safeId = `email-ev-${id.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
                html += `<label class="awm-check-chip" for="${safeId}">`
                    + `<input type="checkbox" class="awm-check__input" id="${safeId}" data-email-event="${escapeHtml(id)}"${checked}>`
                    + `<span class="awm-check__visual" aria-hidden="true"></span>`
                    + `<span class="awm-check__text">${escapeHtml(title)}</span></label>`;
            });
            html += '</div></div>';
        });
        html += '</div>';
        root.innerHTML = html;
    }

    function updateNotificationMethodFields() {
        const method = document.getElementById('notif-method').value;
        const groups = ['browser', 'webhook', 'telegram', 'max', 'matrix'];
        groups.forEach((name) => {
            const el = document.getElementById(`notif-fields-${name}`);
            if (el) el.classList.remove('active');
        });
        const targetKey = method === 'slack' ? 'webhook' : method;
        const target = document.getElementById(`notif-fields-${targetKey}`) || document.getElementById('notif-fields-browser');
        if (target) target.classList.add('active');
    }

    let notifEmailMeta = { smtpEnabled: false, userEmail: '' };

    function emailDeliveryBadgeSvg(kind) {
        if (kind === 'on') {
            return '<svg class="notif-email-status-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
                + '<rect x="2" y="4" width="20" height="16" rx="2"></rect>'
                + '<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>'
                + '<path d="M9 14l2 2 4-4"></path>'
                + '</svg>';
        }
        if (kind === 'blocked') {
            return '<svg class="notif-email-status-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
                + '<rect x="2" y="4" width="20" height="16" rx="2"></rect>'
                + '<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>'
                + '<circle cx="18" cy="17" r="4" fill="var(--surface)"></circle>'
                + '<path d="M18 15v2M18 19h.01"></path>'
                + '</svg>';
        }
        return '<svg class="notif-email-status-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
            + '<rect x="2" y="4" width="20" height="16" rx="2"></rect>'
            + '<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>'
            + '<path d="M4 4l16 16"></path>'
            + '</svg>';
    }

    function updateEmailDeliveryBadge() {
        const badge = document.getElementById('notif-email-delivery-badge');
        const textEl = document.getElementById('notif-email-delivery-badge-text');
        if (!badge || !textEl) return;
        const enabledEl = document.getElementById('notif-email-enabled');
        const userOn = Boolean(enabledEl && enabledEl.checked);
        const smtpOn = Boolean(notifEmailMeta.smtpEnabled);
        const hasEmail = Boolean(String(notifEmailMeta.userEmail || '').trim());
        badge.classList.remove('is-on', 'is-off', 'is-blocked');
        let kind = 'off';
        let label = 'Выключена';
        let title = 'Доставка на email выключена';
        if (userOn && smtpOn && hasEmail) {
            kind = 'on';
            label = 'Включена';
            title = 'Доставка на email включена';
        } else if (userOn && !smtpOn) {
            kind = 'blocked';
            label = 'SMTP выкл.';
            title = 'Вы включили копии, но глобальный SMTP выключен администратором';
        } else if (userOn && !hasEmail) {
            kind = 'blocked';
            label = 'Нет адреса';
            title = 'Укажите email в основной информации профиля';
        }
        badge.classList.add(kind === 'on' ? 'is-on' : (kind === 'blocked' ? 'is-blocked' : 'is-off'));
        badge.title = title;
        badge.setAttribute('aria-label', `Доставка email: ${label}`);
        const iconHtml = emailDeliveryBadgeSvg(kind);
        badge.innerHTML = `${iconHtml}<span id="notif-email-delivery-badge-text">${label}</span>`;
    }

    async function loadNotificationSettings() {
        const response = await fetch('/api/notifications/settings');
        if (!response.ok) return;
        const data = await response.json();
        document.getElementById('notif-enabled').value = data.is_enabled ? '1' : '0';
        document.getElementById('notif-method').value = data.method || 'browser';
        const config = data.config || {};
        document.getElementById('notif-webhook-url').value = config.webhook_url || '';
        document.getElementById('notif-webhook-token').value = config.webhook_token || '';
        document.getElementById('notif-telegram-bot-token').value = config.telegram_bot_token || '';
        document.getElementById('notif-telegram-chat-id').value = config.telegram_chat_id || '';
        document.getElementById('notif-telegram-proxy').value = config.telegram_proxy_url || config.proxy_url || '';
        document.getElementById('notif-max-bot-token').value = config.max_bot_token || '';
        document.getElementById('notif-max-chat-id').value = config.max_chat_id || '';
        document.getElementById('notif-max-api-url').value = config.max_api_url || '';
        document.getElementById('notif-matrix-homeserver').value = config.matrix_homeserver || '';
        document.getElementById('notif-matrix-room-id').value = config.matrix_room_id || '';
        document.getElementById('notif-matrix-access-token').value = config.matrix_access_token || '';
        updateNotificationMethodFields();

        notifEmailMeta = {
            smtpEnabled: Boolean(data.smtp_enabled),
            userEmail: String(data.user_email || '').trim(),
        };
        const emailEnabled = document.getElementById('notif-email-enabled');
        if (emailEnabled) {
            emailEnabled.checked = Boolean(data.email_enabled);
            emailEnabled.removeEventListener('change', updateEmailDeliveryBadge);
            emailEnabled.addEventListener('change', updateEmailDeliveryBadge);
        }
        const addrHint = document.getElementById('notif-email-address-hint');
        if (addrHint) {
            addrHint.textContent = notifEmailMeta.userEmail
                ? `Адрес: ${notifEmailMeta.userEmail}`
                : 'Email в профиле не задан — укажите его выше, иначе письма не уйдут.';
        }
        const smtpHint = document.getElementById('notif-email-smtp-hint');
        if (smtpHint) {
            if (!data.smtp_enabled) {
                smtpHint.textContent = 'Глобальный SMTP выключен администратором. Копии на email не будут отправляться, пока SMTP не включат в Настройках.';
            } else {
                smtpHint.textContent = 'Копии выбранных уведомлений на адрес из профиля. SMTP настраивает администратор глобально. Доставка через Celery при готовой очереди.';
            }
        }
        renderEmailEventCatalog(data);
        updateEmailDeliveryBadge();
    }

    async function saveNotificationSettings(e) {
        e.preventDefault();
        const payload = getNotificationPayloadFromForm();
        const response = await fetch('/api/notifications/settings', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        if (!response.ok) {
            const err = await response.json().catch(() => ({ detail: 'Ошибка сохранения настроек оповещений' }));
            alert(err.detail || 'Ошибка сохранения настроек оповещений');
            return;
        }
        alert('Настройки оповещений сохранены');
    }

    async function saveEmailNotificationSettings() {
        const statusEl = document.getElementById('notif-email-status');
        const payload = getNotificationPayloadFromForm();
        if (statusEl) statusEl.textContent = 'Сохранение email…';
        const response = await fetch('/api/notifications/settings', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        if (!response.ok) {
            const err = await response.json().catch(() => ({ detail: 'Ошибка сохранения email' }));
            if (statusEl) statusEl.textContent = err.detail || 'Ошибка сохранения email';
            return;
        }
        if (statusEl) statusEl.textContent = 'Настройки email сохранены';
        updateEmailDeliveryBadge();
    }

    async function sendNotificationTest() {
        const payload = getNotificationPayloadFromForm();
        payload.test_kind = 'primary';
        const response = await fetch('/api/notifications/settings/test', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        if (!response.ok) {
            const err = await response.json().catch(() => ({ detail: 'Ошибка тестовой отправки' }));
            alert(err.detail || 'Ошибка тестовой отправки');
            return;
        }
        if (payload.method === 'browser') {
            await requestBrowserNotificationPermission();
            if ('Notification' in window && Notification.permission === 'granted') {
                new Notification('Тестовое уведомление AWM', { body: 'Browser-уведомления работают' });
            }
        }
        alert('Тест канала отправлен');
    }

    async function sendEmailNotificationTest() {
        const statusEl = document.getElementById('notif-email-status');
        if (statusEl) statusEl.textContent = 'Отправка теста email…';
        const response = await fetch('/api/notifications/settings/test', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ test_kind: 'email' }),
        });
        if (!response.ok) {
            const err = await response.json().catch(() => ({ detail: 'Ошибка теста email' }));
            if (statusEl) statusEl.textContent = err.detail || 'Ошибка теста email';
            return;
        }
        if (statusEl) statusEl.textContent = 'Тестовое письмо отправлено';
    }

    async function requestBrowserNotificationPermission() {
        if (!('Notification' in window)) {
            alert('Ваш браузер не поддерживает Notification API');
            return;
        }
        const permission = await Notification.requestPermission();
        if (permission !== 'granted') {
            alert('Разрешение на browser-уведомления не выдано');
            return;
        }
        alert('Разрешение на browser-уведомления выдано');
    }

    document.getElementById('password-modal-close').addEventListener('click', closePasswordModal);
    document.getElementById('password-modal-cancel').addEventListener('click', closePasswordModal);
    document.getElementById('password-modal-overlay').addEventListener('click', (e) => {
        if (e.target && e.target.id === 'password-modal-overlay') {
            closePasswordModal();
        }
    });
    document.getElementById('password-change-form').addEventListener('submit', submitPasswordChange);

    const sessionsModalClose = document.getElementById('sessions-modal-close');
    if (sessionsModalClose) sessionsModalClose.addEventListener('click', closeSessionsModal);
    const sessionsModalOverlay = document.getElementById('sessions-modal-overlay');
    if (sessionsModalOverlay) {
        sessionsModalOverlay.addEventListener('click', (e) => {
            if (e.target && e.target.id === 'sessions-modal-overlay') {
                closeSessionsModal();
            }
        });
    }
    const sessionsRevokeOthersBtn = document.getElementById('sessions-revoke-others-btn');
    if (sessionsRevokeOthersBtn) sessionsRevokeOthersBtn.addEventListener('click', revokeOtherSessions);
    const singleSessionCb = document.getElementById('single-session-enabled');
    if (singleSessionCb) singleSessionCb.addEventListener('change', saveSingleSessionPreference);

    function userCanManageApiTokens(me) {
        const roles = Array.isArray(me?.roles) ? me.roles.map(String) : [];
        if (roles.includes('admin')) return true;
        const perms = Array.isArray(me?.permissions) ? me.permissions.map(String) : [];
        return perms.includes('api_tokens.manage');
    }

    function formatPatDate(value) {
        if (!value) return '—';
        try {
            const d = new Date(String(value));
            if (Number.isNaN(d.getTime())) return escapeHtml(String(value));
            return escapeHtml(d.toLocaleString());
        } catch (e) {
            return escapeHtml(String(value));
        }
    }

    function patStatusLabel(item) {
        const code = String(item.status || '').trim();
        const label = String(item.status_label || '').trim();
        if (code && label) {
            return { cls: code, text: label };
        }
        if (item.revoked_at) return { cls: 'revoked', text: 'Отозван' };
        if (item.suspended_at) return { cls: 'suspended', text: 'Приостановлен' };
        return { cls: 'active', text: 'Активен' };
    }

    function renderPatSchedule(item) {
        if (!item.schedule_enabled) return 'Всегда';
        const days = (item.schedule_days_labels || []).join(', ') || '—';
        const start = item.schedule_time_start || '—';
        const end = item.schedule_time_end || '—';
        return `${escapeHtml(days)} · ${escapeHtml(start)}–${escapeHtml(end)}`;
    }

    function renderPatScopes(item) {
        const view = Array.isArray(item.permissions_view) ? item.permissions_view : [];
        if (!view.length) {
            const names = Array.isArray(item.permissions) ? item.permissions : [];
            if (!names.length) return '—';
            return `<div class="profile-api-token-scopes">${names.map((n) =>
                `<span class="profile-api-token-scope-chip">${escapeHtml(n)}</span>`
            ).join('')}</div>`;
        }
        return `<div class="profile-api-token-scopes">${view.map((p) =>
            `<span class="profile-api-token-scope-chip" title="${escapeHtml(p.name || '')}">${escapeHtml(p.title || p.name || '')}</span>`
        ).join('')}</div>`;
    }

    function togglePatScheduleFields(enabledEl, fieldsEl) {
        if (!fieldsEl) return;
        fieldsEl.style.display = enabledEl && enabledEl.checked ? '' : 'none';
    }

    function collectPatDays(selector) {
        return [...document.querySelectorAll(selector)].filter((el) => el.checked).map((el) => Number(el.value));
    }

    function updatePatQuotaUi(quota) {
        const label = document.getElementById('pat-quota-label');
        const createBtn = document.getElementById('pat-create-btn');
        const q = quota && typeof quota === 'object' ? quota : {};
        if (label) {
            if (q.limited && q.limit != null) {
                const count = Number(q.count) || 0;
                const limit = Number(q.limit) || 0;
                label.textContent = `Токенов ${count}/${limit}`;
                label.style.display = '';
                label.title = q.can_create
                    ? `Можно создать ещё ${Math.max(0, limit - count)} токен(ов)`
                    : 'Достигнут лимит. Отзовите неиспользуемый токен или обратитесь к администратору.';
            } else {
                label.style.display = 'none';
                label.textContent = '';
            }
        }
        if (createBtn) {
            const blocked = q.limited && q.can_create === false;
            createBtn.disabled = blocked;
            createBtn.title = blocked
                ? 'Достигнут лимит API-токенов'
                : 'Создать новый постоянный API-токен';
        }
        window.awmPatQuota = q;
    }

    async function loadProfileApiTokens() {
        const box = document.getElementById('profile-api-tokens-list');
        if (!box) return;
        box.innerHTML = '<div class="loading">Загрузка токенов...</div>';
        try {
            const response = await fetch('/api/auth/me/api-tokens');
            if (!response.ok) {
                let detail = 'Не удалось загрузить токены';
                try {
                    const payload = await response.json();
                    detail = payload.detail || detail;
                } catch (err) {}
                throw new Error(detail);
            }
            const data = await response.json();
            updatePatQuotaUi(data.quota);
            window.awmPatAvailableScopes = Array.isArray(data.available_scopes) ? data.available_scopes : [];
            window.awmPatItemsById = {};
            const items = Array.isArray(data.items) ? data.items : [];
            items.forEach((item) => {
                if (item && item.id) window.awmPatItemsById[item.id] = item;
            });
            if (!items.length) {
                box.innerHTML = '<div class="empty-state">Постоянные API-токены отсутствуют</div>';
                return;
            }
            box.innerHTML = `
                <div style="overflow-x:auto;">
                <table class="profile-api-tokens-table data-table">
                    <thead>
                        <tr>
                            <th>Название</th>
                            <th>Префикс</th>
                            <th>Срок</th>
                            <th>Расписание</th>
                            <th>Последнее использование</th>
                            <th>Права</th>
                            <th>Статус</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        ${items.map((item) => {
                            const st = patStatusLabel(item);
                            const id = escapeHtml(item.id || '');
                            const canEdit = !item.revoked_at;
                            const suspended = !!item.suspended_at;
                            return `<tr>
                                <td>${escapeHtml(item.name || '')}</td>
                                <td><code>awm_pat_${escapeHtml(item.token_prefix || '')}…</code></td>
                                <td>${item.expires_at ? formatPatDate(item.expires_at) : 'Бессрочно'}</td>
                                <td>${renderPatSchedule(item)}</td>
                                <td>${formatPatDate(item.last_used_at)}</td>
                                <td>${renderPatScopes(item)}</td>
                                <td><span class="profile-api-token-status ${st.cls}">${st.text}</span></td>
                                <td>
                                    <div class="profile-api-token-actions" role="group" aria-label="Действия с токеном">
                                        ${canEdit ? `<button type="button" class="ui-icon-btn" data-pat-rename="${id}" title="Переименовать" aria-label="Переименовать"><span class="ui-icon" aria-hidden="true">✏</span></button>` : ''}
                                        ${canEdit ? `<button type="button" class="ui-icon-btn" data-pat-schedule="${id}" title="Расписание" aria-label="Расписание"><span class="ui-icon" aria-hidden="true">📅</span></button>` : ''}
                                        ${canEdit && !suspended ? `<button type="button" class="ui-icon-btn" data-pat-suspend="${id}" title="Приостановить" aria-label="Приостановить"><span class="ui-icon" aria-hidden="true">⏸</span></button>` : ''}
                                        ${canEdit && suspended ? `<button type="button" class="ui-icon-btn" data-pat-resume="${id}" title="Возобновить" aria-label="Возобновить"><span class="ui-icon" aria-hidden="true">▶</span></button>` : ''}
                                        ${canEdit ? `<button type="button" class="ui-icon-btn ui-icon-btn-danger" data-pat-revoke="${id}" title="Отозвать" aria-label="Отозвать"><span class="ui-icon" aria-hidden="true">🚫</span></button>` : ''}
                                    </div>
                                </td>
                            </tr>`;
                        }).join('')}
                    </tbody>
                </table>
                </div>
            `;
            box.querySelectorAll('[data-pat-rename]').forEach((btn) => {
                btn.addEventListener('click', () => renameProfileApiToken(btn.getAttribute('data-pat-rename')));
            });
            box.querySelectorAll('[data-pat-schedule]').forEach((btn) => {
                btn.addEventListener('click', () => openPatScheduleModal(btn.getAttribute('data-pat-schedule')));
            });
            box.querySelectorAll('[data-pat-suspend]').forEach((btn) => {
                btn.addEventListener('click', () => suspendProfileApiToken(btn.getAttribute('data-pat-suspend')));
            });
            box.querySelectorAll('[data-pat-resume]').forEach((btn) => {
                btn.addEventListener('click', () => resumeProfileApiToken(btn.getAttribute('data-pat-resume')));
            });
            box.querySelectorAll('[data-pat-revoke]').forEach((btn) => {
                btn.addEventListener('click', () => revokeProfileApiToken(btn.getAttribute('data-pat-revoke')));
            });
        } catch (err) {
            box.innerHTML = `<div class="empty-state">Ошибка: ${escapeHtml(err.message || 'загрузка')}</div>`;
        }
    }

    function openPatCreateModal() {
        if (window.awmPatQuota && window.awmPatQuota.limited && window.awmPatQuota.can_create === false) {
            if (typeof awmAlert === 'function') {
                awmAlert(
                    'Достигнут лимит API-токенов. Отзовите неиспользуемый токен или обратитесь к администратору.',
                    'Лимит токенов'
                );
            }
            return;
        }
        const overlay = document.getElementById('pat-create-modal-overlay');
        const form = document.getElementById('pat-create-form');
        const scopesBox = document.getElementById('pat-create-scopes');
        const errorEl = document.getElementById('pat-create-error');
        const scheduleEnabled = document.getElementById('pat-create-schedule-enabled');
        if (errorEl) {
            errorEl.hidden = true;
            errorEl.textContent = '';
        }
        if (form) form.reset();
        if (scheduleEnabled) scheduleEnabled.checked = false;
        togglePatScheduleFields(scheduleEnabled, document.getElementById('pat-create-schedule-fields'));
        const scopes = Array.isArray(window.awmPatAvailableScopes) ? window.awmPatAvailableScopes : [];
        if (scopesBox) {
            if (!scopes.length) {
                scopesBox.innerHTML = '<div class="profile-perm-empty">Нет доступных прав для назначения токену</div>';
            } else {
                scopesBox.innerHTML = scopes.map((scope) => {
                    const name = escapeHtml(scope.name || '');
                    const title = escapeHtml(scope.title || scope.name || '');
                    return `<div class="profile-api-token-scope-item">
                        <input type="checkbox" id="pat-scope-${name}" value="${name}" data-pat-scope="${name}">
                        <label for="pat-scope-${name}">${title}</label>
                    </div>`;
                }).join('');
            }
        }
        if (overlay) {
            overlay.classList.add('show');
            overlay.setAttribute('aria-hidden', 'false');
        }
    }

    function closePatCreateModal() {
        const overlay = document.getElementById('pat-create-modal-overlay');
        if (!overlay) return;
        overlay.classList.remove('show');
        overlay.setAttribute('aria-hidden', 'true');
    }

    function openPatSecretModal(token) {
        const overlay = document.getElementById('pat-secret-modal-overlay');
        const field = document.getElementById('pat-secret-token');
        const headerField = document.getElementById('pat-secret-header');
        const secret = String(token || '').trim();
        if (field) field.value = secret;
        if (headerField) headerField.value = secret ? `Authorization: Bearer ${secret}` : '';
        if (overlay) {
            overlay.classList.add('show');
            overlay.setAttribute('aria-hidden', 'false');
        }
        if (field) {
            field.focus();
            field.select();
        }
    }

    function closePatSecretModal() {
        const overlay = document.getElementById('pat-secret-modal-overlay');
        const field = document.getElementById('pat-secret-token');
        const headerField = document.getElementById('pat-secret-header');
        if (overlay) {
            overlay.classList.remove('show');
            overlay.setAttribute('aria-hidden', 'true');
        }
        if (field) field.value = '';
        if (headerField) headerField.value = '';
    }

    function openPatScheduleModal(tokenId) {
        const id = String(tokenId || '').trim();
        const item = (window.awmPatItemsById || {})[id];
        if (!item) return;
        document.getElementById('pat-schedule-token-id').value = id;
        const enabled = document.getElementById('pat-schedule-enabled');
        enabled.checked = !!item.schedule_enabled;
        const days = new Set((item.schedule_days || []).map(Number));
        document.querySelectorAll('[data-pat-sched-day]').forEach((el) => {
            el.checked = days.has(Number(el.value));
        });
        document.getElementById('pat-schedule-time-start').value = item.schedule_time_start || '09:00';
        document.getElementById('pat-schedule-time-end').value = item.schedule_time_end || '18:00';
        const errorEl = document.getElementById('pat-schedule-error');
        if (errorEl) {
            errorEl.hidden = true;
            errorEl.textContent = '';
        }
        togglePatScheduleFields(enabled, document.getElementById('pat-schedule-fields'));
        const overlay = document.getElementById('pat-schedule-modal-overlay');
        if (overlay) {
            overlay.classList.add('show');
            overlay.setAttribute('aria-hidden', 'false');
        }
    }

    function closePatScheduleModal() {
        const overlay = document.getElementById('pat-schedule-modal-overlay');
        if (!overlay) return;
        overlay.classList.remove('show');
        overlay.setAttribute('aria-hidden', 'true');
    }

    async function submitPatCreate(e) {
        e.preventDefault();
        const errorEl = document.getElementById('pat-create-error');
        const name = (document.getElementById('pat-create-name')?.value || '').trim();
        const expires = (document.getElementById('pat-create-expires')?.value || '').trim();
        const permissions = [...document.querySelectorAll('[data-pat-scope]:checked')].map((el) => el.value);
        const scheduleEnabled = !!document.getElementById('pat-create-schedule-enabled')?.checked;
        if (errorEl) {
            errorEl.hidden = true;
            errorEl.textContent = '';
        }
        try {
            const response = await fetch('/api/auth/me/api-tokens', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    name,
                    permissions,
                    expires_at: expires || null,
                    schedule_enabled: scheduleEnabled,
                    schedule_days: scheduleEnabled ? collectPatDays('[data-pat-day]:checked') : [],
                    schedule_time_start: scheduleEnabled ? (document.getElementById('pat-create-time-start')?.value || null) : null,
                    schedule_time_end: scheduleEnabled ? (document.getElementById('pat-create-time-end')?.value || null) : null,
                }),
            });
            if (!response.ok) {
                let detail = 'Не удалось создать токен';
                try {
                    const payload = await response.json();
                    detail = payload.detail || detail;
                } catch (err) {}
                throw new Error(typeof detail === 'string' ? detail : JSON.stringify(detail));
            }
            const created = await response.json();
            closePatCreateModal();
            openPatSecretModal(created.token || '');
            await loadProfileApiTokens();
        } catch (err) {
            if (errorEl) {
                errorEl.hidden = false;
                errorEl.textContent = err.message || 'Ошибка создания';
            }
        }
    }

    async function submitPatSchedule(e) {
        e.preventDefault();
        const id = (document.getElementById('pat-schedule-token-id')?.value || '').trim();
        const errorEl = document.getElementById('pat-schedule-error');
        const scheduleEnabled = !!document.getElementById('pat-schedule-enabled')?.checked;
        if (errorEl) {
            errorEl.hidden = true;
            errorEl.textContent = '';
        }
        try {
            const response = await fetch(`/api/auth/me/api-tokens/${encodeURIComponent(id)}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    schedule_enabled: scheduleEnabled,
                    schedule_days: scheduleEnabled ? collectPatDays('[data-pat-sched-day]:checked') : [],
                    schedule_time_start: scheduleEnabled ? (document.getElementById('pat-schedule-time-start')?.value || null) : null,
                    schedule_time_end: scheduleEnabled ? (document.getElementById('pat-schedule-time-end')?.value || null) : null,
                }),
            });
            if (!response.ok) {
                let detail = 'Не удалось сохранить расписание';
                try {
                    const payload = await response.json();
                    detail = payload.detail || detail;
                } catch (err) {}
                throw new Error(typeof detail === 'string' ? detail : JSON.stringify(detail));
            }
            closePatScheduleModal();
            await loadProfileApiTokens();
        } catch (err) {
            if (errorEl) {
                errorEl.hidden = false;
                errorEl.textContent = err.message || 'Ошибка';
            }
        }
    }

    async function renameProfileApiToken(tokenId) {
        const id = String(tokenId || '').trim();
        if (!id) return;
        let name = null;
        if (typeof awmPrompt === 'function') {
            name = await awmPrompt('Новое название токена', '', 'Переименование токена');
        } else {
            name = window.prompt('Новое название токена');
        }
        if (name === null) return;
        const trimmed = String(name).trim();
        if (!trimmed) {
            if (typeof awmAlert === 'function') {
                await awmAlert('Укажите название токена', 'API-токены');
            } else {
                alert('Укажите название токена');
            }
            return;
        }
        try {
            const response = await fetch(`/api/auth/me/api-tokens/${encodeURIComponent(id)}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name: trimmed }),
            });
            if (!response.ok) {
                let detail = 'Не удалось переименовать';
                try {
                    const payload = await response.json();
                    detail = payload.detail || detail;
                } catch (err) {}
                throw new Error(detail);
            }
            await loadProfileApiTokens();
        } catch (err) {
            if (typeof awmAlert === 'function') {
                await awmAlert(err.message || 'Ошибка', 'API-токены');
            } else {
                alert(err.message || 'Ошибка');
            }
        }
    }

    async function suspendProfileApiToken(tokenId) {
        const id = String(tokenId || '').trim();
        if (!id) return;
        let ok = true;
        if (typeof awmConfirm === 'function') {
            ok = await awmConfirm('Приостановить токен? Запросы с ним будут отклоняться, пока не возобновите.', 'Пауза токена');
        }
        if (!ok) return;
        const response = await fetch(`/api/auth/me/api-tokens/${encodeURIComponent(id)}/suspend`, { method: 'POST' });
        if (!response.ok) {
            let detail = 'Не удалось приостановить';
            try { detail = (await response.json()).detail || detail; } catch (err) {}
            if (typeof awmAlert === 'function') await awmAlert(detail, 'API-токены');
            else alert(detail);
            return;
        }
        await loadProfileApiTokens();
    }

    async function resumeProfileApiToken(tokenId) {
        const id = String(tokenId || '').trim();
        if (!id) return;
        const response = await fetch(`/api/auth/me/api-tokens/${encodeURIComponent(id)}/resume`, { method: 'POST' });
        if (!response.ok) {
            let detail = 'Не удалось возобновить';
            try { detail = (await response.json()).detail || detail; } catch (err) {}
            if (typeof awmAlert === 'function') await awmAlert(detail, 'API-токены');
            else alert(detail);
            return;
        }
        await loadProfileApiTokens();
    }

    async function revokeProfileApiToken(tokenId) {
        const id = String(tokenId || '').trim();
        if (!id) return;
        let ok = false;
        if (typeof awmConfirm === 'function') {
            ok = await awmConfirm('Отозвать этот API-токен? Интеграции с ним перестанут работать.', 'Отзыв токена');
        } else {
            ok = window.confirm('Отозвать этот API-токен?');
        }
        if (!ok) return;
        try {
            const response = await fetch(`/api/auth/me/api-tokens/${encodeURIComponent(id)}/revoke`, {
                method: 'POST',
            });
            if (!response.ok) {
                let detail = 'Не удалось отозвать';
                try {
                    const payload = await response.json();
                    detail = payload.detail || detail;
                } catch (err) {}
                throw new Error(detail);
            }
            await loadProfileApiTokens();
        } catch (err) {
            if (typeof awmAlert === 'function') {
                await awmAlert(err.message || 'Ошибка', 'API-токены');
            } else {
                alert(err.message || 'Ошибка');
            }
        }
    }

    document.getElementById('pat-create-modal-close').addEventListener('click', closePatCreateModal);
    document.getElementById('pat-create-modal-cancel').addEventListener('click', closePatCreateModal);
    document.getElementById('pat-create-modal-overlay').addEventListener('click', (e) => {
        if (e.target && e.target.id === 'pat-create-modal-overlay') closePatCreateModal();
    });
    document.getElementById('pat-create-form').addEventListener('submit', submitPatCreate);
    document.getElementById('pat-create-schedule-enabled').addEventListener('change', (e) => {
        togglePatScheduleFields(e.target, document.getElementById('pat-create-schedule-fields'));
    });
    document.getElementById('pat-schedule-modal-close').addEventListener('click', closePatScheduleModal);
    document.getElementById('pat-schedule-modal-cancel').addEventListener('click', closePatScheduleModal);
    document.getElementById('pat-schedule-modal-overlay').addEventListener('click', (e) => {
        if (e.target && e.target.id === 'pat-schedule-modal-overlay') closePatScheduleModal();
    });
    document.getElementById('pat-schedule-form').addEventListener('submit', submitPatSchedule);
    document.getElementById('pat-schedule-enabled').addEventListener('change', (e) => {
        togglePatScheduleFields(e.target, document.getElementById('pat-schedule-fields'));
    });
    document.getElementById('pat-secret-modal-close').addEventListener('click', closePatSecretModal);
    document.getElementById('pat-secret-modal-done').addEventListener('click', closePatSecretModal);
    document.getElementById('pat-secret-copy-btn').addEventListener('click', async () => {
        const field = document.getElementById('pat-secret-token');
        await _copyTextToClipboard(field?.value, 'Токен пуст', 'Токен скопирован');
    });
    document.getElementById('pat-secret-copy-header-btn').addEventListener('click', async () => {
        const field = document.getElementById('pat-secret-header');
        await _copyTextToClipboard(field?.value, 'Заголовок пуст', 'Заголовок скопирован');
    });
    document.getElementById('pat-secret-modal-overlay').addEventListener('click', (e) => {
        if (e.target && e.target.id === 'pat-secret-modal-overlay') closePatSecretModal();
    });

    loadProfile();
</script>
{% endblock %}