{{define "comment/comments"}}
{{if gt (len .Comments) 0}}
<div id="pipeComments" class="fn-clear"
     data-title="{{.I18n.Comment}}{{.I18n.Colon}}{{.Article.Title}}"
     data-id="{{.Article.ID}}">
    <div class="pipe-comment__header">
        <span id="pipeCommentsCnt">{{.Article.CommentCount}}</span> {{$.I18n.Comment}}
    </div>
    <div>
        {{range .Comments}}
        {{template "comment/comment" dict "Item" . "I18n" $.I18n "Username" $.User.UName "ArticleID" $.Article.ID}}
        {{end}}
    </div>

    <nav class="pipe-comment__pagination fn-clear">
        {{if gt $.Pagination.PageCount 0}}
            {{if gt $.Pagination.PreviousPageNum 0}}
            <a class="pipe-comment__btn" href="?p={{$.Pagination.PreviousPageNum}}">
                <svg><use xlink:href="#icon-chevron-left"></use></svg>
                <span class="fn-left">{{$.I18n.prePage}}</span>
            </a>
            {{end}}
            {{if lt $.Pagination.CurrentPageNum $.Pagination.PageCount}}
            <a class="pipe-comment__btn" href="?p={{$.Pagination.NextPageNum}}">
                <span class="fn-left">{{$.I18n.nextPage}}&nbsp;</span>
                <svg><use xlink:href="#icon-chevron-right"></use></svg>
            </a>
            {{end}}
        {{end}}

        <span class="pipe-comment__btn fn-right"
              data-text="{{$.I18n.Comment}}{{$.I18n.Colon}}{{$.Article.Title}}"
              data-id="{{$.Article.ID}}" id="pipeCommentBottomComment">
             <svg><use xlink:href="#icon-reply"></use></svg> {{$.I18n.Comment}}
        </span>
    </nav>
</div>
{{else}}
<div class="pipe-comment__null fn-clear"
     data-title="{{.I18n.Comment}}{{.I18n.Colon}}{{.Article.Title}}"
     data-id="{{.Article.ID}}"
     id="pipeComments">
    <svg>
        <use xlink:href="#icon-reply"></use>
    </svg>
    {{.I18n.StayStep}}
</div>
{{end}}
{{end}}