{include file="_partials/head.tpl"}

<div class="hb">
  <div class="hb-wrap">
    <button class="hb-burger" id="hbBurger" type="button" aria-label="Menu"><svg class="cz-ic"><use href="#i-menu"/></svg> {lang key="handbook.nav_title"}</button>

    <nav class="hb-crumbs" aria-label="breadcrumbs">
      [foreach var="breadcrumbs" as="c"][if {c.url}]<a href="{c.url}">{c.title}</a><span class="hb-crumbs__sep">/</span>[else]<span class="hb-crumbs__cur">{c.title}</span>[/if][/foreach]
    </nav>

    <div class="hb-layout">
      {include file="plugins/handbook/docs/_sidebar.tpl"}

      <main class="hb-main">
        [if {fallback}="1"]<div class="hb-note"><svg class="cz-ic"><use href="#i-globe"/></svg> {lang key="handbook.fallback_notice"}</div>[/if]
        <article class="hb-article">
          <h1>{doc_title}</h1>
          {doc_content|raw}
        </article>
      </main>

      [if {has_toc}="1"]
      <aside class="hb-toc">
        <div class="hb-toc__title">{lang key="handbook.on_this_page"}</div>
        <ul class="hb-toc__list">
          [foreach var="doc_toc" as="t"]<li class="[if {t.is_sub}="1"]hb-toc__sub[/if]"><a href="#{t.id}">{t.text}</a></li>[/foreach]
        </ul>
      </aside>
      [/if]
    </div>
  </div>
</div>

{include file="_partials/foot.tpl"}
