{extend name="public:layout" /}

{block name="main-container"}
<!-- Main Container -->
<main id="main-container">
    <!-- Hero Content -->
    <div class="bg-primary-dark">
        <section class="content content-full content-boxed overflow-hidden">
            <!-- Section Content -->
            <div class="push-100-t push-50 text-center">
                <h1 class="h2 text-white push-10 visibility-hidden" data-toggle="appear" data-class="animated fadeInDown">{$document.title}</h1>
            </div>
            <!-- END Section Content -->
        </section>
    </div>
    <!-- END Hero Content -->

    <!-- Navigation -->
    <div class="bg-white">
        <section class="content content-mini content-mini-full content-boxed overflow-hidden">
            <ol class="breadcrumb">
                <li><a class="text-primary-dark" href="{:url('cms/index/index')}">首页</a></li>
                {volist name="breadcrumb" id="v"}
                <li><a class="text-primary-dark" href="{$v.url}" target="{$v.target}">{$v.name}</a></li>
                {/volist}
            </ol>
        </section>
    </div>
    <!-- END Navigation -->

    <section class="content content-boxed">
        <!-- Section Content -->
        <div class="push-50-t push-50">
            <div class="row js-gallery">
                <div class="col-md-8">
                    <div class="block block-rounded">
                        <div class="block-content document-content">
                            {$document.content|raw|default=""}
                        </div>
                    </div>
                    <nav>
                        <ul class="pager">
                            <li class="previous {$prev.url|default='disabled'}">
                                <a href="{$prev.url|default='javascript:void(0)'}" data-toggle="tooltip" data-original-title="{$prev.title|default='已经没有上一篇了'}">上一篇</a>
                            </li>
                            <li class="next {$next.url|default='disabled'}">
                                <a href="{$next.url|default='javascript:void(0)'}" data-toggle="tooltip" data-original-title="{$next.title|default='已经没有下一篇了'}">下一篇</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="col-md-4">
                    <div class="block">
                        <div class="block-header bg-gray-lighter text-center">
                            <h3 class="block-title">关于 {$document.title}</h3>
                        </div>
                        <div class="block-content">
                            <table class="table table-borderless table-condensed">
                                <tbody>
                                <tr>
                                    <td>
                                        <i class="fa fa-fw fa-eye push-10-r"></i> {$document.view|default=0} 次阅读
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <i class="fa fa-fw fa-calendar push-10-r"></i> {$document.create_time|time_tran}
                                    </td>
                                </tr>
                                {present name="document.tags"}
                                <tr>
                                    <td>
                                        <i class="fa fa-fw fa-tags push-10-r"></i>
                                        {volist name="document.tags" id="tag"}
                                        <a class="label label-primary" href="{:url('search/index', ['keyword' => $tag])}">{$tag}</a>
                                        {/volist}
                                    </td>
                                </tr>
                                {/present}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- Search -->
                    <div class="block">
                        <div class="block-header bg-gray-lighter">
                            <h3 class="block-title">搜索</h3>
                        </div>
                        <div class="block-content block-content-full">
                            <form action="{:url('cms/search/index')}" method="post">
                                <div class="input-group input-group-lg">
                                    <input class="form-control" name="keyword" type="text" placeholder="请输入关键字...">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default"><i class="fa fa-search"></i></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- END Search -->
                </div>
            </div>
        </div>
        <!-- END Section Content -->
    </section>
</main>
<!-- END Main Container -->
{/block}

{block name="style"}
<link rel="stylesheet" href="__LIBS__/magnific-popup/magnific-popup.min.css">
{/block}

{block name="script"}
<script src="__LIBS__/magnific-popup/magnific-popup.min.js"></script>
<script>
    jQuery(function () {
        $('.page-content,.document-content').find('img').each(function () {
            $(this).parent('a').addClass('img-link');
        });
        jQuery('.js-gallery').magnificPopup({
            delegate: 'a.img-link',
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
</script>
{/block}