{{--
    Панель редактора поверх живого сайта.

    Всё внутри: стили с собственным префиксом, скрипт без зависимостей.
    Панель попадает на любую вёрстку, включая заказанную клиентом на стороне,
    и не имеет права ни сломать её, ни потребовать от неё чего-либо.
--}}
<div id="kz-editor" data-kz-editor>
    <style>
        #kz-editor {
            position: fixed; left: 16px; bottom: 16px; z-index: 2147483000;
            font: 13px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif;
        }
        #kz-editor .kz-editor__bar {
            display: flex; align-items: center; gap: 10px;
            background: #21262d; color: #fff; border-radius: 24px;
            padding: 8px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
        }
        #kz-editor a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
        #kz-editor a:hover { border-bottom-color: #fff; }
        #kz-editor .kz-editor__dot { width: 8px; height: 8px; border-radius: 50%; background: #3fb950; }
        #kz-editor button {
            background: none; border: 1px solid rgba(255,255,255,.35); color: #fff;
            border-radius: 16px; padding: 3px 12px; font: inherit; cursor: pointer;
        }

        /* Подсветка блоков включается кнопкой: постоянные рамки мешают
           смотреть на сайт глазами посетителя. */
        body.kz-editor-blocks [data-kz-block] { outline: 1px dashed rgba(31,111,235,.8); outline-offset: -1px; position: relative; }
        body.kz-editor-blocks [data-kz-block]:hover { outline-style: solid; }
        body.kz-editor-blocks [data-kz-block]::after {
            content: "блок " attr(data-kz-block);
            position: absolute; top: 0; right: 0; z-index: 2147482000;
            background: #1f6feb; color: #fff; font: 11px/1 sans-serif; padding: 3px 6px;
        }
    </style>

    <div class="kz-editor__bar">
        <span class="kz-editor__dot" title="вы вошли как администратор"></span>

        @if ($section !== null)
            <a href="{{ $adminUrl }}/sections/{{ $section->id }}/objects">Править «{{ $section->name }}»</a>
        @endif

        <a href="{{ $adminUrl }}/layout">Зоны и блоки</a>
        <a href="{{ $adminUrl }}">Админка</a>

        <button type="button" data-kz-toggle-blocks>Показать блоки</button>
    </div>

    <script>
        (function () {
            var button = document.querySelector('[data-kz-toggle-blocks]');

            if (! button) { return; }

            button.addEventListener('click', function () {
                var on = document.body.classList.toggle('kz-editor-blocks');

                button.textContent = on ? 'Скрыть блоки' : 'Показать блоки';

                /* Выбор запоминается: администратор ходит по страницам,
                   и переключать подсветку на каждой — работа впустую. */
                try { localStorage.setItem('kz-editor-blocks', on ? '1' : ''); } catch (e) {}
            });

            try {
                if (localStorage.getItem('kz-editor-blocks')) { button.click(); }
            } catch (e) {}
        })();
    </script>
</div>