{{> layout/header}}

{{# guang}}
<div class="guang-detail-page guang-page yoho-page clearfix" data-id="{{id}}"> 
    <div class="left-side detail-body">
        {{# header}}
        <div class="detail-title">{{title}}</div>
        <div class="article-info clearfix">
            <div class="article-author">
                <div class="author-avatar">
                    <img src="{{avatar}}" alt="">
                </div>
            </div>
            <div class="author-info">
                <a class="author-name" href="{{authorUrl}}">{{name}}</a>
            </div>
            <div class="article-status clearfix">
                <span class="article-time">{{time}}</span>
                <span class="article-click">点击：{{click}}</span>
                <span id="article-comment" class="article-comment"><em class="comment-num">{{commentNum}}</em>条评论</span>
            </div>
        </div>
        {{/ header}}
        
        <div class="article-main">
        {{# content}}
            {{# pic}}
                <div class="article-pic block">
                    <img class="lazy" data-original="{{.}}">
                </div>
            {{/ pic}}
            {{# text}}
                <div class="article-text block">
                    <p>{{.}}</p>
                </div>
            {{/ text}}
            {{#if smallPic}}
                <div class="article-small-pic block clearfix"> 
                    {{# smallPic}}
                        <img class="lazy" data-original="{{.}}">
                    {{/ smallPic}}
                </div>
            {{/if}}
            {{# relatedReco}}
                <div class="related-reco block clearfix">
                <div class="block-header">
                    相关推荐
                    {{# moreReco}}
                    <a class="more-reco" href="{{.}}">MORE ></a>
                    {{/ moreReco}}
                </div>
                <div class="recos clearfix">
                    {{# recos}}
                        {{> product/good}}
                    {{/ recos}}
                </div>
            </div>
            {{/ relatedReco}}
        {{/ content}}
        </div>
        <div class="related-brand block clearfix">
            <div class="block-header">相关品牌</div>
            <div class="brands">
                {{# brands}}
                    <div class="brand">
                        <a class="thumb" href="{{url}}">
                            <img class="lazy" data-original="{{thumb}}">
                        </a>
                        <p class="brand-name">{{name}}</p>
                    </div>
                {{/ brands}}
            </div>
        </div>
        {{# userInfo}}
        <div class="user-handle">
            <ul class="clearfix">
                <li id="prise-btn" class="like-status{{#isLike}} liked{{/isLike}}">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe626;</i>
                        <span class="like-num">{{likeNum}}</span>
                    </a>
                </li>
                <li id="collect-btn" class="sort-collect{{#isCollected}} collected{{/isCollected}}">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe616;</i>
                        <span>收藏</span>
                        <span class="cancel-collect">取消收藏</span>
                    </a>
                </li>
            </ul>
        </div>
        {{/ userInfo}}
        <div class="article-bottom-info clearfix">
            {{#if tag}}
                <div class="article-tag clearfix">
                    <i class="tag-icon iconfont">&#xe624;</i>
                    <ul class="clearfix">
                        {{# tag}}
                        <li>
                            <a href="{{url}}">{{name}}</a>
                        </li>
                        {{/ tag}}
                    </ul>
                </div>
            {{/if}}
            <div class="article-share">
                <span class="title pull-left">分享至：</span>
                {{> share}}
            </div>
        </div>
        {{#if relatedPost}}
        <div class="detail-related-posts">
            <ul class="clearfix">
                {{# relatedPost}}
                <li>
                    <a href="{{url}}">
                        <span class="bg-img">
                            <img src="{{thumb}}" alt="">
                        </span>
                        <div class="post-title">
                            <h2>{{title}}</h2>
                        </div>
                    </a>
                </li>
                {{/ relatedPost}}
            </ul>
        </div>
        {{/if}}

        <div id="comment-area" class="comment-area">
            <div class="comment-textarea">
                <textarea id="comment-info" placeholder="我有话要说。。。">{{commentInfo}}</textarea>
            </div>
            <div class="comment-publish clearfix">
                <span id="word-count-tip" class="word-count-tip"></span>
                <a id="comment-btn" class="publish-btn disable">评论</a>
            </div>
            <div id="pjax-container" class="comments-wrap">
                {{# comment}}
                <h4>
                    <span class="comment-num">{{commentNum}}</span>
                    条评论 <i></i>
                </h4>
                <p class="comments-empty">还没有评论，快抢沙发吧</p>
                <div class="commnets-resultwrapper">
                    <ul class="comments-list">
                        {{# list}}
                        <li class="clearfix">
                            <div class="avatar">
                                <img class="comment-user-avatar" src="{{avatar}}" alt=""></div>
                            <div class="comment-info">
                                    <p class="comment-user-name">{{name}}</p>
                                    <p class="comment-content">{{content}}</p>
                                    <p class="comment-time">{{time}}</p>
                            </div>
                        </li>
                        {{/ list}}
                    </ul>
                    <div class="comment-pager pager">{{{commentPager}}}</div>
                </div>
                {{/ comment}}
            </div>
        </div>
    </div>
    <div class="right-side detail-side">
        {{> guang/right-side}}
    </div>
</div>
{{/ guang}}

{{> layout/footer}}