{{define "Gina/article.html"}}
<!DOCTYPE html>
<html>
<head>
    {{template "head/head" .}}
    {{template "head/3rdstatistic" .}}
    {{template "head/article" .}}
</head>
<body{{if .ToC}} class="body--side"{{end}}>
{{template "Gina/header" .}}
{{template "Gina/side" .}}
<div class="wrapper content">
    <article>
        <header class="article-detail__header">
            <div class="ft-center fn-relative">
                <h2 class="header__title{{if .Article.Editable}} header__title--edit{{end}}">
                    {{if .Article.Topped}}
                    <svg>
                        <use xlink:href="#focus"></use>
                    </svg>
                    {{end}}
                    {{.Article.Title}}
                </h2>
                <div class="ft-gray">
                    {{if gt .UserCount 1}}
                    <a rel="nofollow"
                       href="{{.Article.Author.URL}}">
                        {{.Article.Author.Name}}
                    </a>
                    •
                    {{end}}
                    <time class="ft-nowrap">{{.Article.CreatedAt}}</time>
                    •
                    <span class="ft-nowrap">{{.Article.ViewCount}} {{$.I18n.View}}</span>
                    {{if gt .Article.CommentCount 0}}
                    •
                    <a href="{{.Article.URL}}#pipeComments" class="ft-nowrap ft-gray">{{.Article.CommentCount}}
                        {{$.I18n.Comment}}</a>
                    {{end}}
                </div>

                {{if .Article.Editable}}
                <span class="article__action">
                    <a class="action__btn fn-clear action__btn--active"
                       href="{{$.Conf.Server}}/admin/articles/post?id={{.Article.ID}}">
                        {{$.I18n.Edit}} &nbsp;
                        <svg class="fn-right">
                            <use xlink:href="#edit"></use>
                        </svg>
                    </a>
                </span>
                {{end}}
            </div>
            <div class="fn-padding30">
                {{range .Article.Tags}}
                <a class="tag" rel="tag" href="{{.URL}}">{{.Title}}</a>
                {{end}}
            </div>
        </header>
        <section class="pipe-content__reset article__abstract fn-padding30" id="articleContent" data-author="{{.Article.Author.Name}}">
            {{.Article.Content}}
        </section>
        <div class="article__action fn-clear">
            <span class="action__share fn-left">
                <span class="action__btn action__btn--share fn-clear fn-left">
                    {{$.I18n.Share}} &nbsp; <svg class="fn-right"><use xlink:href="#reply"></use></svg>
                </span>
                <span class="action__btns fn-left">
                    <span class="action__btn action__btn--wechat" data-type="wechat">
                        <svg><use xlink:href="#wechat"></use></svg>
                    </span>
                    <span class="action__btn action__btn--weibo" data-type="weibo">
                        <svg><use xlink:href="#weibo"></use></svg>
                    </span>
                    <span class="action__btn action__btn--twitter" data-type="twitter">
                        <svg><use xlink:href="#twitter"></use></svg>
                    </span>
                    <span class="action__btn action__btn--google" data-type="google">
                        <svg><use xlink:href="#google"></use></svg>
                    </span>
                    <div class="action__code"
                         data-title="{{.Article.Title}}"
                         data-blogtitle="{{$.Setting.BasicBlogTitle}}"
                         data-url="{{.Article.URL}}"
                         data-avatar="{{.Article.Author.AvatarURLWithSize 128}}"></div>
                </span>
            </span>
            <span class="fn-right action__btn action__btn--space action__btn--active fn-clear"
                  data-title="{{.I18n.Comment}}{{.I18n.Colon}}{{.Article.Title}}"
                  id="articleCommentBtn"
                  data-id="{{.Article.ID}}">
                {{$.I18n.Comment}} &nbsp;
                <svg class="fn-right">
                    <use xlink:href="#comment"></use>
                </svg>
            </span>
        </div>
    </article>
</div>
<div class="wrapper content">
    {{template "comment/comments" .}}

    {{if or .PreviousArticle .NextArticle}}
    <div class="fn-bottom"></div>
    {{if gt .UserCount 1}}
    <div class="fn-clear article__near fn-two">
        {{if .PreviousArticle}}
        <a href="{{.PreviousArticle.URL}}" rel="prev">
            <svg class="fn-absolute near__svg">
                <use xlink:href="#chevron-left"></use>
            </svg>
            <span class="avatar pipe-tooltipped pipe-tooltipped--n fn-absolute"
                  aria-label="{{.PreviousArticle.Author.Name}}"
                  data-src="{{.PreviousArticle.Author.AvatarURLWithSize 128}}"></span>
            <span class="near__title">
                     {{.I18n.PreArticle}}<br>
                    <b class="ft-break">{{.PreviousArticle.Title}}</b>
                </span>
        </a>
        {{end}}

        {{if .NextArticle}}
        <a href="{{.NextArticle.URL}}" rel="next" class="near__next {{if .PreviousArticle}}{{else}}near__next--single{{end}}">
            <svg class="fn-absolute near__svg">
                <use xlink:href="#chevron-right"></use>
            </svg>
            <span class="avatar pipe-tooltipped pipe-tooltipped--n fn-absolute"
                  aria-label="{{.NextArticle.Author.Name}}"
                  data-src="{{.NextArticle.Author.AvatarURLWithSize 128}}"></span>
            <span class="near__title">
                    {{.I18n.NextArticle}}<br>
                    <b class="ft-break">{{.NextArticle.Title}}</b>
                </span>
        </a>
        {{end}}
    </div>
    {{else}}
    <div class="fn-clear article__near fn-two">
        {{if .PreviousArticle}}
        <a href="{{.PreviousArticle.URL}}"
           class="pipe-tooltipped pipe-tooltipped--w"
           rel="prev" aria-label="{{.I18n.PreArticle}}">
            <svg class="near__icon">
                <use xlink:href="#chevron-left"></use>
            </svg>
            <b class="ft-break">{{.PreviousArticle.Title}}</b>
        </a>
        {{end}}

        {{if .NextArticle}}
        <a href="{{.NextArticle.URL}}" rel="next"
           class="pipe-tooltipped pipe-tooltipped--e fn-two--next {{if .PreviousArticle}}{{else}}near__next--single{{end}}"
           aria-label="{{.I18n.NextArticle}}">
            <b class="ft-break">{{.NextArticle.Title}}</b>
            <svg class="near__icon-last">
                <use xlink:href="#chevron-right"></use>
            </svg>
        </a>
        {{end}}
    </div>
    {{end}}
    {{end}}
</div>
{{if gt (len .RecommendArticles) 0}}
<div class="article__relevant">
    <div class="module__header">
        {{$.I18n.RecommendArticle}}
    </div>
    <div class="relevant__panel">
        {{range $index, $item := .RecommendArticles}}
        <div class="relevant__item">
            {{if $item.ThumbnailURL}}
            <a class="relevant__thumbnail"
               href="{{$item.URL}}"
               data-src="{{$item.ThumbnailURL}}"
               target="_blank"></a>
            <a class="module__list-title fn-ellipsis" href="{{$item.URL}}" target="_blank">{{$item.Title}}</a>
            {{else}}
            <a class="module__list-title fn-ellipsis" href="{{$item.URL}}" target="_blank">{{$item.Title}}</a>
            <a href="{{$item.URL}} target="_blank class="ft-fade relevant__abstract">
                {{$item.Abstract}}
            </a>
            {{end}}
            <div class="fn-relative">
                <a class="avatar fn-absolute" data-src="{{$item.Author.AvatarURL}}"
                   href="{{$item.Author.URL}}" target="_blank"></a>
                <div class="relevant__content">
                    <a href="{{$item.Author.URL}}" class="ft-gray" target="_blank">{{$item.Author.Name}}</a> <br>
                    <span class="ft-12 ft-fade fn-clear">
                        {{$item.CreatedAt}}
                       <a href="{{$item.URL}}#comments" class="fn-right ft-fade" target="_blank">
                           {{if ne 0 $item.CommentCount}}
                           {{$item.CommentCount}}
                           {{$.I18n.Comment}}
                           {{else}}
                           {{$.I18n.Comment}}
                           <svg><use xlink:href="#comment"></use></svg>
                           {{end}}
                       </a>
                   </span>
                </div>
            </div>
        </div>
        {{end}}
    </div>
</div>
{{end}}

{{template "comment/editor" .}}

{{template "Gina/footer" .}}
</body>
</html>
{{end}}