{{define "pagination"}}
<link rel="stylesheet" href="/static/css/pagination.css?v=3">
{{if .pagination}}
{{if .pagination.Visible}}
<nav class="pagination" aria-label="分页" data-pagination data-page="{{.pagination.Page}}" data-total="{{.pagination.TotalPages}}">
    {{if .pagination.HasPrev}}
    <a class="pagination-btn pagination-btn--arrow" href="{{.pagination.PrevURL}}" aria-label="上一页">
        <img class="pagination-arrow" src="/static/images/page_prev.svg" alt="上一页" />
    </a>
    {{else}}
    <span class="pagination-btn pagination-btn--arrow is-disabled" aria-disabled="true" aria-label="上一页">
        <img class="pagination-arrow" src="/static/images/page_prev.svg" alt="上一页" />
    </span>
    {{end}}

    {{range .pagination.Items}}
    {{if .Dots}}
    <span class="pagination-ellipsis">…</span>
    {{else if .Active}}
    <span class="pagination-btn pagination-btn--active{{if gt (len .Label) 1}} pagination-btn--wide{{end}}" aria-current="page">{{.Label}}</span>
    {{else}}
    <a class="pagination-btn{{if gt (len .Label) 1}} pagination-btn--wide{{end}}" href="{{.URL}}">{{.Label}}</a>
    {{end}}
    {{end}}

    {{if .pagination.HasNext}}
    <a class="pagination-btn pagination-btn--arrow" href="{{.pagination.NextURL}}" aria-label="下一页">
        <img class="pagination-arrow" src="/static/images/page_next.svg" alt="下一页" />
    </a>
    {{else}}
    <span class="pagination-btn pagination-btn--arrow is-disabled" aria-disabled="true" aria-label="下一页">
        <img class="pagination-arrow" src="/static/images/page_next.svg" alt="下一页" />
    </span>
    {{end}}

    <form class="pagination-jump" data-pagination-jump action="" method="get">
        <span class="pagination-jump-label">前往</span>
        <input class="pagination-jump-input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="4" name="page" autocomplete="off" aria-label="页码" />
        <span class="pagination-jump-label">页</span>
        <button class="pagination-jump-submit" type="submit">确定</button>
    </form>
</nav>
<script src="/static/js/pages/pagination.js"></script>
{{end}}
{{else}}
<nav class="pagination" aria-label="分页" data-pagination data-page="1" data-total="11">
    <button class="pagination-btn pagination-btn--arrow" type="button" aria-label="上一页">
        <img class="pagination-arrow" src="/static/images/page_prev.svg" alt="上一页" />
    </button>
    <button class="pagination-btn pagination-btn--active" type="button">1</button>
    <button class="pagination-btn" type="button">2</button>
    <button class="pagination-btn" type="button">3</button>
    <span class="pagination-ellipsis">…</span>
    <button class="pagination-btn pagination-btn--wide" type="button">11</button>
    <button class="pagination-btn pagination-btn--arrow" type="button" aria-label="下一页">
        <img class="pagination-arrow" src="/static/images/page_next.svg" alt="下一页" />
    </button>
    <form class="pagination-jump" data-pagination-jump action="" method="get">
        <span class="pagination-jump-label">前往</span>
        <input class="pagination-jump-input" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="4" name="page" value="6" autocomplete="off" aria-label="页码" />
        <span class="pagination-jump-label">页</span>
        <button class="pagination-jump-submit" type="submit">确定</button>
    </form>
</nav>
<script src="/static/js/pages/pagination.js"></script>
{{end}}
{{end}}