<!doctype html>
<html lang="ru" data-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{page.title} — {site.name}</title>
{csrf format="meta"}
<script>
/* FOUC-prevention: ставим классы до первой отрисовки, чтобы не прыгало меню и тема. */
(function(){try{
  if(localStorage.getItem('celena_admin_collapsed')==='1')document.documentElement.classList.add('is-collapsed');
  var t=localStorage.getItem('celena_theme');
  var mode=(t==='dark'||t==='light'||t==='auto')?t:'auto';
  document.documentElement.setAttribute('data-theme-mode',mode);
  if(mode==='dark'||mode==='light')document.documentElement.setAttribute('data-theme',mode);
  else{var h=new Date().getHours();document.documentElement.setAttribute('data-theme',(h>=18||h<7)?'dark':'light');}
}catch(e){}})();
</script>
<link rel="stylesheet" href="/public/assets/runtime/celena.css?v={asset_v}">
<link rel="stylesheet" href="/public/assets/admin/admin.css?v={asset_v}">
<link rel="stylesheet" href="/public/assets/admin/celenaEditor.css?v={asset_v}">
<script src="/public/assets/admin/jquery.min.js"></script>
<script src="/public/assets/admin/celenaEditor.js?v={asset_v}"></script>
<script src="/public/assets/admin/editor-init.js?v={asset_v}"></script>
<script src="/public/assets/runtime/celena.js?v={asset_v}" defer></script>
<script src="/public/assets/admin/ai.js?v={asset_v}" defer></script>
<script src="/public/assets/admin/media-picker.js?v={asset_v}" defer></script>
<script src="/public/assets/admin/sortable.js?v={asset_v}" defer></script>
<script src="/public/assets/admin/admin.js?v={asset_v}" defer></script>
</head>
<body class="admin">
  <aside class="sidebar">
    <a href="/" target="_blank" rel="noopener" class="sb-brand" title="{lang key="admin.open_site"}">
      <img class="sb-logo-ico" src="/public/assets/admin/logo.svg?v={asset_v}" alt="Celena" width="36" height="36">
      <span class="sb-text">
        <b>Celena CMS</b>
        <span class="sb-ver">v{cms_version}</span>
      </span>
    </a>
    <nav class="sb-nav">
      <a href="/admin" class="sb-link [if {active_menu}="dashboard"]active[/if]">{icon name="dashboard" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.dashboard"}</span></a>

      <div class="sb-section-label"><span>{lang key="admin.sec_content"}</span></div>
      <a href="/admin/news" class="sb-link [if {active_menu}="news"]active[/if]">{icon name="news" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.news"}</span></a>
      <a href="/admin/pages" class="sb-link [if {active_menu}="pages"]active[/if]">{icon name="pages" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.pages"}</span></a>
      <a href="/admin/categories" class="sb-link [if {active_menu}="categories"]active[/if]">{icon name="categories" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.categories"}</span></a>
      <a href="/admin/comments" class="sb-link [if {active_menu}="comments"]active[/if]">{icon name="comments" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.comments"}</span></a>
      <a href="/admin/media" class="sb-link [if {active_menu}="media"]active[/if]">{icon name="media" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.media"}</span></a>
      <a href="/admin/custom-fields" class="sb-link [if {active_menu}="custom-fields"]active[/if]">{icon name="custom_fields" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.custom_fields"}</span></a>
      <a href="/admin/banners" class="sb-link [if {active_menu}="banners"]active[/if]">{icon name="flag" size="22" class="sb-ico"}<span class="sb-label">Баннеры</span></a>
      <a href="/admin/menus" class="sb-link [if {active_menu}="menus"]active[/if]">{icon name="list" size="22" class="sb-ico"}<span class="sb-label">Меню сайта</span></a>

      [if {plugin_menu}]
      <div class="sb-section-label"><span>{lang key="admin.sec_plugins_list"}</span></div>
      [foreach var="plugin_menu" as="pm"]
        [if {pm.children}]
          <div class="sb-group [if {pm.active}]is-open[/if]" data-sb-group>
            <button type="button" class="sb-link has-sub [if {pm.active}]active[/if]" data-sb-toggle>
              [if {pm.svg}]{pm.svg|raw}[else]{icon name="box" size="22" class="sb-ico"}[/if]
              <span class="sb-label">{pm.label}</span>
              <span class="sb-sub-caret">{icon name="chevron_down" size="14"}</span>
            </button>
            <div class="sb-sub">
              [foreach var="pm.children" as="ch"]
                [if {ch.docs_url}]
                  <a href="#" class="sb-sublink"
                     data-docs-open
                     data-docs-url="{ch.docs_url}"
                     data-docs-title="{ch.docs_title}">{ch.label}</a>
                [else]
                  <a href="{ch.url}" class="sb-sublink [if {active_menu}={ch.slug}]active[/if]">{ch.label}</a>
                [/if]
              [/foreach]
            </div>
          </div>
        [else]
          <a href="{pm.url}" class="sb-link [if {pm.active}]active[/if]">[if {pm.svg}]{pm.svg|raw}[else]{icon name="box" size="22" class="sb-ico"}[/if]<span class="sb-label">{pm.label}</span></a>
        [/if]
      [/foreach]
      [/if]

      <div class="sb-section-label"><span>{lang key="admin.sec_management"}</span></div>
      <a href="/admin/users" class="sb-link [if {active_menu}="users"]active[/if]">{icon name="users" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.users"}</span></a>
      <a href="/admin/seo" class="sb-link [if {active_menu}="seo"]active[/if]">{icon name="seo" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.seo"}</span></a>
      <a href="/admin/ai-settings" class="sb-link [if {active_menu}="ai-settings"]active[/if]">{icon name="ai" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.ai"}</span></a>

      <div class="sb-section-label"><span>{lang key="admin.sec_system"}</span></div>
      <a href="/admin/translations" class="sb-link [if {active_menu}="translations"]active[/if]">{icon name="language" size="22" class="sb-ico"}<span class="sb-label">Переводы</span></a>
      <a href="/admin/templates" class="sb-link [if {active_menu}="templates"]active[/if]">{icon name="templates" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.templates"}</span></a>
      <a href="/admin/plugins" class="sb-link [if {active_menu}="plugins"]active[/if]">{icon name="plugins" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.plugins"}</span></a>
      <a href="/admin/webhooks" class="sb-link [if {active_menu}="webhooks"]active[/if]">{icon name="webhooks" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.webhooks"}</span></a>
      <a href="/admin/settings" class="sb-link [if {active_menu}="settings"]active[/if]">{icon name="settings" size="22" class="sb-ico"}<span class="sb-label">{lang key="admin.settings"}</span></a>
    </nav>
  </aside>
  <main class="content">
    <header class="topbar">
      <div style="display:flex;align-items:center">
        <button type="button" class="mobile-toggle" data-sidebar-mobile aria-label="{lang key="admin.menu"}">{icon name="menu" size="20"}</button>
        <button type="button" class="sb-toggle" data-sidebar-collapse aria-label="{lang key="admin.collapse_sidebar"}" title="{lang key="admin.collapse_sidebar"}">{icon name="chevron_left" size="16"}</button>
        <div class="title">{page.title}</div>
      </div>
      <div class="user">
        <div class="lang-dd" data-lang-dd>
          <button type="button" class="lang-dd-btn" data-lang-toggle aria-label="{lang key="admin.language"}">
            <span class="lang-dd-code-lg">{current_lang_short}</span>
            {icon name="chevron_down" size="12"}
          </button>
          <div class="lang-dd-menu" data-lang-menu hidden>
            [foreach var="langs" as="l"]
              <a href="?lang={l.code}" class="lang-dd-item [if {l.active}]active[/if]">
                <span class="lang-dd-chip">{l.short}</span>
                <span class="lang-dd-name">{l.name}</span>
              </a>
            [/foreach]
          </div>
        </div>
        <button type="button" class="theme-cycle" data-celena-theme-cycle title="{lang key="admin.theme_switch"}" aria-label="{lang key="admin.theme_switch"}">
          <span class="theme-cycle-ico" data-theme-ico="light" title="{lang key="admin.theme_light"}">{icon name="sun" size="16"}</span>
          <span class="theme-cycle-ico" data-theme-ico="dark" title="{lang key="admin.theme_dark"}">{icon name="moon" size="16"}</span>
          <span class="theme-cycle-ico" data-theme-ico="auto" title="{lang key="admin.theme_auto"}">{icon name="theme_auto" size="16"}</span>
        </button>
        <div class="notif" data-notif>
          <button type="button" class="notif-btn" data-notif-toggle aria-label="{lang key="admin.notifications"}" title="{lang key="admin.notifications"}">
            {icon name="bell" size="18"}
            [if {notifications_count}]<span class="notif-badge" data-notif-badge>{notifications_count}</span>[/if]
          </button>
          <div class="notif-panel" data-notif-panel hidden>
            <div class="notif-head">
              <span>{lang key="admin.notifications"}</span>
              <button type="button" class="notif-clear" data-notif-clear hidden>{icon name="check" size="14"} {lang key="admin.notif_mark_all_read"}</button>
            </div>
            <ul class="notif-list" data-notif-list>
              [foreach var="notifications" as="n"]
                <li class="notif-item" data-notif-id="{n.id}">
                  [if {n.url}]<a class="notif-link" href="{n.url}">[else]<div class="notif-link">[/if]
                    <div class="notif-title">{n.title}</div>
                    [if {n.text}]<div class="notif-text">{n.text}</div>[/if]
                    [if {n.time}]<div class="notif-time muted">{n.time}</div>[/if]
                  [if {n.url}]</a>[else]</div>[/if]
                  <button type="button" class="notif-read" data-notif-read title="{lang key="admin.notif_mark_read"}" aria-label="{lang key="admin.notif_mark_read"}">{icon name="check" size="14"}</button>
                </li>
              [/foreach]
            </ul>
            <div class="notif-empty" data-notif-empty [if {notifications}]hidden[/if]>{lang key="admin.no_notifications"}</div>
            <a class="notif-all" href="/admin/notifications">{lang key="admin.notif_view_all"} {icon name="arrow_right" size="14"}</a>
          </div>
        </div>
        <a href="/admin/profile" class="user-name" title="{lang key="admin.profile"}">{icon name="profile" size="14"} {user.name}</a>
        <form method="post" action="/admin/logout" class="logout-form" style="display:inline">
          {csrf}
          <button type="submit" class="logout" title="{lang key="admin.logout"}">{icon name="logout" size="16"}</button>
        </form>
      </div>
    </header>
    <div class="page">
      {include file="_partials/flash.tpl"}
      <!-- Универсальный drawer документации. Открывается через data-docs-open (URL в data-docs-url). -->
      <div class="docs-drawer" data-docs-drawer hidden>
        <div class="docs-drawer-backdrop" data-docs-close></div>
        <aside class="docs-drawer-panel">
          <header class="docs-drawer-head">
            <h2 data-docs-title>{lang key="admin.docs_tags_title"}</h2>
            <button type="button" class="docs-drawer-close" data-docs-close aria-label="{lang key="admin.docs_tag_close"}">{icon name="close" size="20"}</button>
          </header>
          <div class="docs-drawer-body" data-docs-body>
            <p class="muted">{lang key="admin.loading"}</p>
          </div>
        </aside>
      </div>
