{extend name="layout"}
{block name="title"}{$pageTitle}{/block}
{block name="keywords"}{$seoKeywords}{/block}
{block name="description"}{$seoDesc}{/block}

{block name="body"}
<div class="dc-layout">

    <aside class="dc-sidebar" id="dcSidebar">
        <div class="dc-sidebar-head">
            <div class="dc-project-title">{$project.title}</div>
            {if condition="count($versionList) gt 1"}
            <select class="dc-version-select" id="dcVersionSelect">
                {volist name="versionList" id="v"}
                <option value="{$v.name}" data-default="{$v.is_default}" {if condition="$version.id eq $v.id"}selected{/if}>{$v.title}</option>
                {/volist}
            </select>
            {/if}
        </div>

        <nav class="dc-tree">
            {$treeHtml|raw}
        </nav>
    </aside>

    <main class="dc-main">
        <div class="dc-crumbs">
            <a href="/docs">文档中心</a>
            <span class="dc-crumb-sep">/</span>
            <a href="/docs/{$project.name}">{$project.title}</a>
            {volist name="crumbs" id="crumb"}
            <span class="dc-crumb-sep">/</span>
            {if condition="$crumb.id eq $activeId"}
            <span class="dc-crumb-current">{$crumb.title}</span>
            {else/}
            <span>{$crumb.title}</span>
            {/if}
            {/volist}
        </div>

        <article class="dc-article">
            <h1 class="dc-article-title">{$doc.title}</h1>
            <div class="dc-article-meta">
                <span>更新于 {$updateDate}</span>
                <span class="dc-dot">·</span>
                <span>阅读 {$doc.views}</span>
            </div>

            <div class="dc-content" id="dcContent">
                {$content|raw}
            </div>
        </article>

        <nav class="dc-pager">
            {if condition="$prev"}
            <a class="dc-pager-item dc-pager-prev" href="{$baseUrl}/{$prev.name}">
                <span class="dc-pager-label">上一篇</span>
                <span class="dc-pager-title">{$prev.title}</span>
            </a>
            {else/}
            <span class="dc-pager-item is-disabled"></span>
            {/if}

            {if condition="$next"}
            <a class="dc-pager-item dc-pager-next" href="{$baseUrl}/{$next.name}">
                <span class="dc-pager-label">下一篇</span>
                <span class="dc-pager-title">{$next.title}</span>
            </a>
            {else/}
            <span class="dc-pager-item is-disabled"></span>
            {/if}
        </nav>
    </main>

    <aside class="dc-toc">
        {if condition="!empty($toc)"}
        <div class="dc-toc-title">本页目录</div>
        <ul class="dc-toc-list" id="dcToc">
            {volist name="toc" id="t"}
            <li class="dc-toc-h{$t.level}"><a href="#{$t.anchor}" data-anchor="{$t.anchor}">{$t.text}</a></li>
            {/volist}
        </ul>
        {/if}
    </aside>

</div>

<div class="dc-mask" id="dcMask"></div>
{/block}