<!doctype html>
<html lang="{{ labels.lang|default('ru') }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ browserTitle|default(title) }}</title>
    <meta name="description" content="{{ browserTitle|default(title) }}">
    <link rel="canonical" href="{{ currentUrl }}">
    <style>
        :root {
            --bg: #f5f5f7;
            --surface: #fff;
            --text: #1d1d1f;
            --muted: #6e6e73;
            --border: rgba(0, 0, 0, 0.08);
            --accent: #0066cc;
            --category-bg: #f0f4fa;
            --category-border: rgba(0, 102, 204, 0.22);
            --sidebar-w: min(320px, 36vw);
            --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
            --topbar-h: 52px;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            height: 100%;
            background: var(--bg);
            color: var(--text);
            font-family: var(--font);
            font-size: 15px;
            line-height: 1.55;
            -webkit-font-smoothing: antialiased;
        }

        body.menu-open {
            overflow: hidden;
        }

        .layout {
            display: flex;
            min-height: 100%;
            height: 100vh;
        }

        .sidebar-overlay {
            display: none;
        }

        .sidebar {
            flex: 0 0 var(--sidebar-w);
            width: var(--sidebar-w);
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            min-height: 0;
            z-index: 300;
        }

        .sidebar-head {
            flex-shrink: 0;
            padding: 12px 14px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .sidebar-head a {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            text-decoration: none;
        }

        .sidebar-head a:hover {
            color: var(--accent);
        }

        .sidebar-head a.is-active {
            color: var(--accent);
        }

        .sidebar-close {
            display: none;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            padding: 0;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--muted);
            cursor: pointer;
        }

        .sidebar-close:hover {
            background: rgba(0, 0, 0, 0.06);
            color: var(--text);
        }

        .sidebar-nav {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px 8px 14px;
        }

        .nav-category {
            margin-bottom: 14px;
            background: var(--category-bg);
            border: 1px solid var(--category-border);
            border-radius: 10px;
            overflow: hidden;
        }

        .nav-category-head {
            padding: 10px 12px;
            background: rgba(0, 102, 204, 0.07);
            border-bottom: 1px solid var(--category-border);
        }

        .nav-category-name {
            display: block;
            font-size: 14px;
            font-weight: 650;
            line-height: 1.3;
            color: var(--text);
            word-break: break-word;
        }

        .nav-category .nav-list {
            padding: 6px 8px 8px;
        }

        .nav-group-plain {
            margin-bottom: 8px;
        }

        .nav-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav-list a {
            display: block;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 14px;
            line-height: 1.35;
            color: var(--text);
            text-decoration: none;
            word-break: break-word;
        }

        .nav-list a:hover {
            background: rgba(0, 102, 204, 0.08);
            color: var(--accent);
        }

        .nav-list a.is-active {
            background: rgba(0, 102, 204, 0.14);
            color: var(--accent);
            font-weight: 600;
        }

        .main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            min-height: 0;
            background: var(--surface);
        }

        .mobile-topbar {
            display: none;
            flex-shrink: 0;
            align-items: center;
            gap: 10px;
            height: var(--topbar-h);
            padding: 0 12px;
            border-bottom: 1px solid var(--border);
            background: var(--surface);
        }

        .burger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--text);
            cursor: pointer;
        }

        .burger:hover {
            background: rgba(0, 0, 0, 0.06);
        }

        .burger svg {
            width: 22px;
            height: 22px;
        }

        .mobile-topbar-title {
            flex: 1;
            min-width: 0;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .main-scroll {
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        .main-inner {
            padding: 14px 18px 24px;
            max-width: none;
        }

        .page-title {
            margin: 0 0 12px;
            font-size: 1.25rem;
            font-weight: 650;
            line-height: 1.25;
            word-break: break-word;
        }

        .browse-title {
            margin: 0 0 20px;
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.15;
            word-break: break-word;
        }

        .browse-section {
            margin-bottom: 28px;
        }

        .browse-section:last-child {
            margin-bottom: 0;
        }

        .browse-section-label {
            margin: 0 0 12px;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            letter-spacing: 0.02em;
        }

        .browse-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
        }

        .browse-card {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 16px 18px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            text-decoration: none;
            color: inherit;
            transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        }

        .browse-card:hover {
            border-color: var(--category-border);
            background: var(--category-bg);
            box-shadow: 0 4px 16px rgba(0, 102, 204, 0.08);
        }

        .browse-card-icon {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 102, 204, 0.1);
            color: var(--accent);
        }

        .browse-card-icon--doc {
            background: rgba(0, 0, 0, 0.05);
            color: var(--muted);
        }

        .browse-card-icon svg {
            width: 20px;
            height: 20px;
        }

        .browse-card-body {
            flex: 1;
            min-width: 0;
        }

        .browse-card-title {
            display: block;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.35;
            word-break: break-word;
            color: var(--text);
        }

        .browse-card:hover .browse-card-title {
            color: var(--accent);
        }

        .browse-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .browse-list .browse-card {
            padding: 14px 16px;
        }

        .nav-category-head a.nav-category-name {
            text-decoration: none;
            color: var(--text);
        }

        .nav-category-head a.nav-category-name:hover {
            color: var(--accent);
        }

        .nav-category-head a.nav-category-name.is-active {
            color: var(--accent);
        }

        .article-body {
            font-size: 15px;
            line-height: 1.6;
        }

        .article-body>:first-child {
            margin-top: 0;
        }

        .article-body h1 {
            font-size: 1.35rem;
            margin: 1.2em 0 0.5em;
        }

        .article-body h2 {
            font-size: 1.15rem;
            margin: 1.3em 0 0.45em;
        }

        .article-body h3 {
            font-size: 1.02rem;
            margin: 1.1em 0 0.35em;
        }

        .article-body p,
        .article-body ul,
        .article-body ol {
            margin: 0 0 0.85em;
        }

        .article-body a {
            color: var(--accent);
        }

        .article-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 0 0 0.85em;
            font-size: 14px;
        }

        .article-body th,
        .article-body td {
            border: 1px solid var(--border);
            padding: 8px 10px;
            text-align: left;
            vertical-align: top;
        }

        .article-body pre {
            overflow-x: auto;
            background: #f5f5f7;
            padding: 12px;
            border-radius: 6px;
            font-size: 13px;
        }

        .article-body code {
            background: #f5f5f7;
            padding: 0.1em 0.3em;
            border-radius: 3px;
            font-size: 0.92em;
        }

        .article-body img {
            max-width: 100%;
            height: auto;
        }

        @media (max-width: 768px) {
            .layout {
                height: 100vh;
                height: 100dvh;
            }

            .mobile-topbar {
                display: flex;
            }

            .sidebar-overlay {
                display: block;
                position: fixed;
                inset: 0;
                z-index: 250;
                background: rgba(0, 0, 0, 0.4);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s ease;
            }

            body.menu-open .sidebar-overlay {
                opacity: 1;
                pointer-events: auto;
            }

            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                width: min(320px, 88vw);
                max-width: 88vw;
                transform: translateX(-100%);
                transition: transform 0.22s ease;
                box-shadow: none;
            }

            body.menu-open .sidebar {
                transform: translateX(0);
                box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
            }

            .sidebar-close {
                display: inline-flex;
            }

        }
    </style>
</head>

<body>
    <div class="sidebar-overlay" id="sidebar-overlay" hidden></div>
    <div class="layout" id="layout">
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-head">
                <a href="/terms" class="{{ currentUrl == '/terms' ? 'is-active' : '' }}">{{ labels.indexTitle }}</a>
                <button type="button" class="sidebar-close" id="sidebar-close" aria-label="{{ labels.closeMenu }}">
                    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2"
                        aria-hidden="true">
                        <path d="M6 6l12 12M18 6L6 18" stroke-linecap="round" />
                    </svg>
                </button>
            </div>
            <nav class="sidebar-nav" aria-label="{{ labels.indexTitle }}">
                {% for section in nav.sections %}
                <div class="nav-category">
                    <div class="nav-category-head">
                        <a href="{{ section.url }}" class="nav-category-name{{ section.active ? ' is-active' : '' }}">{{ section.title }}</a>
                    </div>
                    <ul class="nav-list">
                        {% for doc in section.documents %}
                        <li>
                            <a href="{{ doc.url }}" class="{{ doc.active ? 'is-active' : '' }}">{{ doc.title }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endfor %}
                {% if nav.rootDocs|length > 0 %}
                <div class="nav-group-plain">
                    <ul class="nav-list">
                        {% for doc in nav.rootDocs %}
                        <li>
                            <a href="{{ doc.url }}" class="{{ doc.active ? 'is-active' : '' }}">{{ doc.title }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </nav>
        </aside>

        <main class="main">
            <header class="mobile-topbar">
                <button type="button" class="burger" id="burger-open" aria-label="{{ labels.openMenu }}"
                    aria-expanded="false" aria-controls="sidebar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <path d="M4 7h16M4 12h16M4 17h16" stroke-linecap="round" />
                    </svg>
                </button>
                <span class="mobile-topbar-title">{{ title }}</span>
            </header>
            <div class="main-scroll">
                <div class="main-inner">
                    {% if pageType == 'document' %}
                    <div class="article-body">
                        {{ contentHtml|raw }}
                    </div>
                    {% elseif pageType == 'browse' %}
                    <h1 class="browse-title">{{ title }}</h1>
                    {% if categories|length > 0 %}
                    <section class="browse-section">
                        <h2 class="browse-section-label">{{ labels.categoriesBlock }}</h2>
                        <div class="browse-grid">
                            {% for cat in categories %}
                            <a class="browse-card" href="{{ cat.url }}">
                                <span class="browse-card-icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                        <path d="M4 6a2 2 0 012-2h4l2 2h8a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V6z"
                                            stroke-linejoin="round" />
                                    </svg>
                                </span>
                                <span class="browse-card-body">
                                    <span class="browse-card-title">{{ cat.title }}</span>
                                </span>
                            </a>
                            {% endfor %}
                        </div>
                    </section>
                    {% endif %}
                    {% if browseDocuments|length > 0 %}
                    <section class="browse-section">
                        <h2 class="browse-section-label">{{ labels.documentsBlock }}</h2>
                        <div class="browse-list">
                            {% for doc in browseDocuments %}
                            <a class="browse-card" href="{{ doc.url }}">
                                <span class="browse-card-icon browse-card-icon--doc" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                        <path d="M8 4h8l4 4v12a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2z"
                                            stroke-linejoin="round" />
                                        <path d="M16 4v4h4M8 11h8M8 15h5" stroke-linecap="round" />
                                    </svg>
                                </span>
                                <span class="browse-card-body">
                                    <span class="browse-card-title">{{ doc.title }}</span>
                                </span>
                            </a>
                            {% endfor %}
                        </div>
                    </section>
                    {% endif %}
                    {% endif %}
                </div>
            </div>
        </main>
    </div>
    <script>
        (function () {
            var body = document.body;
            var overlay = document.getElementById('sidebar-overlay');
            var openBtn = document.getElementById('burger-open');
            var closeBtn = document.getElementById('sidebar-close');
            var sidebar = document.getElementById('sidebar');

            function setOpen(open) {
                body.classList.toggle('menu-open', open);
                if (openBtn) {
                    openBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
                }
                if (overlay) {
                    overlay.hidden = !open;
                }
            }

            function openMenu() { setOpen(true); }
            function closeMenu() { setOpen(false); }

            if (openBtn) {
                openBtn.addEventListener('click', openMenu);
            }
            if (closeBtn) {
                closeBtn.addEventListener('click', closeMenu);
            }
            if (overlay) {
                overlay.addEventListener('click', closeMenu);
            }
            if (sidebar) {
                sidebar.querySelectorAll('a').forEach(function (link) {
                    link.addEventListener('click', closeMenu);
                });
            }
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape') {
                    closeMenu();
                }
            });
            window.matchMedia('(min-width: 769px)').addEventListener('change', function (e) {
                if (e.matches) {
                    closeMenu();
                }
            });
        })();
    </script>
</body>

</html>
