<div class="gx-pagination">

    <!-- previous -->
    <a class="gx-page-btn {{if .Prev}} {{else}}disabled{{end}}"
       href="?page={{.Prev}}">
        ‹
        <span class="text-label">Prev</span>
    </a>

    <!-- first page -->
    {{if gt .Current 3}}
    <a class="gx-page-btn" href="?page=1">1</a>
    {{end}}

    <!-- left ellipsis -->
    {{if gt .Current 4}}
    <span class="gx-ellipsis">…</span>
    {{end}}

    <!-- dynamic pages -->
    {{range .Pages}}
    <a class="gx-page-btn {{if eq . $.Current}}active{{end}}" href="?page={{.}}">
        {{.}}
    </a>
    {{end}}

    <!-- right ellipsis -->
    {{if lt .Current (sub .Total 3)}}
    <span class="gx-ellipsis">…</span>
    {{end}}

    <!-- last page -->
    {{if lt .Current (sub .Total 2)}}
    <a class="gx-page-btn" href="?page={{.Total}}">{{.Total}}</a>
    {{end}}

    <!-- next -->
    <a class="gx-page-btn {{if .Next}} {{else}}disabled{{end}}"
       href="?page={{.Next}}">
        <span class="text-label">Next</span>
        ›
    </a>

</div>
