{extend name="common/base" /}

{block name="content"}
<!--
================================================================================
内容详情页模板（全数组直取，不使用取当前数据的标签）
================================================================================
变量命名约定（全站统一）：
  $Info   当前文档（含扩展字段；字段已合并到顶层，也可用 $Info.fields）
  $cate   当前栏目
  $item   列表循环变量名（cms:contentlist / cms:pagelist 等），不得用于「当前栏目 / 当前文档」
控制器 app/index/controller/Content.php 已把下列数组注入模板：
  $Info            当前文档（数组）
  $cate            当前栏目（数组）
  $catpos          栏目层级链（从根到当前栏目，用于面包屑）
  $prev / $next    上一篇 / 下一篇（可能为 null）
  $related         相关内容（数组）      $tags 内容标签（数组）
所以本页全部用「变量.字段」形式取数（如 点 Info.title），不再需要 cms:content / cms:cat /
cms:catpos / cms:prev / cms:next / cms:related / cms:tags 等标签。
================================================================================
-->
<nav class="crumb">
    <a href="{cms:url type='home'}">{:__('Home')}</a>
    <span class="sep">/</span>
    {cms:catpos catid="$cate['id']" separator="/" linkall="1" /}
    <span class="sep">/</span>
    <span class="active">{:__('Body')}</span>
</nav>

<article class="article">
    <header class="article-head">
        <h1>{$Info.title}</h1>
        {if condition="!empty($Info['subtitle'])"}
        <p class="article-sub">{$Info.subtitle}</p>
        {/if}
        <div class="article-meta">
            <span><i class="fa-regular fa-clock"></i>{$Info.datetime}</span>
            <span><i class="fa-regular fa-folder"></i>{:__('Category')}：<a href="{$cate.url}">{$cate.name}</a></span>
            <span><i class="fa-regular fa-eye"></i>{:__('Views')} {$Info.views}</span>
            {if condition="!empty($Info['author'])"}<span><i class="fa-regular fa-user"></i>{:__('Author')}：{$Info.author}</span>{/if}
            {if condition="!empty($Info['source'])"}<span><i class="fa-solid fa-link"></i>{:__('Source')}：{$Info.source}</span>{/if}
        </div>
    </header>

    <div class="article-body">{$Info.content|raw}</div>

    <!--
    扩展字段区：用 cms:fields 标签直接取出（后台勾选「前台显示」且值非空），
    传 content="$Info" 即作用于当前文档，不需要再单独写 volist 循环。
    每项：label 名称 / text 展示文本 / name 标识 / type 类型 / tip 提示 / value 原始值 / media 附件
    -->
    {if condition="!empty($Info['fields'])"}
    <section class="block field-block">
        <div class="block-head"><h2>{:__('ExtFields')}</h2></div>
        <dl class="field-list">
            {cms:fields content="$Info" id="f"}
            <dt>{$f.label}</dt>
            <dd>
                {if condition="$f['is_media']"}
                <span class="field-media">
                    {cms:each list="$f.media" id="m"}
                    {if condition="$m['is_image']"}
                    <a href="{$m.url}" target="_blank"><img src="{$m.url}" alt="{$f.label}"></a>
                    {else /}
                    <a class="field-file" href="{$m.url}" target="_blank"><i class="fa-solid fa-paperclip"></i>{$f.label}</a>
                    {/if}
                    {/cms:each}
                </span>
                {else /}
                {$f.text}
                {/if}
                {if condition="!empty($f['tip'])"}<em class="field-tip">{$f.tip}</em>{/if}
            </dd>
            {/cms:fields}
        </dl>
    </section>
    {/if}

    {if condition="!empty($tags)"}
    <footer class="article-foot">
        {cms:tags contentid="$Info['id']" id="t"}
        <a class="chip" href="{$t.url}">{$t.name}</a>
        {/cms:tags}
    </footer>
    {/if}

    <nav class="article-nav">
        {if condition="!empty($prev)"}
        <a class="prev" href="{$prev.url}">{:__('Prev')}：{$prev.title}</a>
        {else /}
        <span class="prev disabled">{:__('PrevNone')}</span>
        {/if}

        {if condition="!empty($next)"}
        <a class="next" href="{$next.url}">{:__('Next')}：{$next.title}</a>
        {else /}
        <span class="next disabled">{:__('NextNone')}</span>
        {/if}
    </nav>
</article>

{if condition="!empty($related)"}
<section class="block">
    <div class="block-head"><h2>{:__('RelatedContent')}</h2></div>
    <div class="card-grid">
        {cms:related content="$Info" id="rel" limit="3"}
        <article class="card">
            <a class="card-thumb" href="{$rel.url}">
                {if condition="!empty($rel['thumb'])"}
                <img src="{$rel.thumb}" alt="{$rel.title}">
                {else /}
                <span class="thumb-placeholder">{:__('ThumbPlaceholder')}</span>
                {/if}
            </a>
            <div class="card-body">
                <h3 class="card-title"><a href="{$rel.url}">{$rel.title}</a></h3>
                <p class="card-desc">{$rel.summary}</p>
            </div>
        </article>
        {/cms:related}
    </div>
</section>
{/if}
{/block}