<!-- Numbered Pagination -->
<div class="blog-pagination">
    {% set page_list = [-2, -1, 0, 1, 2] %}
    {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
    {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
    {% elif current_page_num == 2 %}{% set offset = 1 %}
    {% elif current_page_num == 1 %}{% set offset = 2 %}
    {% else %}{% set offset = 0 %}{% endif %}

    <div class="blog-pagination-left">
        {% if last_page_num %}<a class="prev-link" href="{{ blog_page_link(last_page_num) }}">❮</a>{% endif %}
        {% if contents.total_page_count > 5 %}
            {% if current_page_num >= 4 %}
                <a href="{{ blog_page_link(1) }}">1</a>
                <a class="elipses" href="{% if current_page_num <= 5 %}{{ blog_page_link(1) }}{% else %}{{ blog_page_link(current_page_num - 5) }}{% endif %}">...</a>
            {% endif %}
        {% endif %}
    </div>
    <div class="blog-pagination-center">
        {% for page in page_list %}
            {% set this_page = current_page_num + page + offset %}
            {% if this_page > 0 and this_page <= contents.total_page_count %}
                <a {% if this_page == current_page_num %}class="active"{% endif %} href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
            {% endif %}
        {% endfor %}
    </div>
    <div class="blog-pagination-right">
        {% if contents.total_page_count > 5 %}
            {% if contents.total_page_count - current_page_num > 2 %}
                <a class="elipses" href="{% if contents.total_page_count - current_page_num <= 5 %}{{ contents.total_page_count }}{% else %}{{ blog_page_link(current_page_num + 5) }}{% endif %}">...</a>
                <a href="{{ blog_page_link(contents.total_page_count) }}">{{ contents.total_page_count }}</a>
            {% endif %}
        {% endif %}
        {% if next_page_num %}<a class="next-link" href="{{ blog_page_link(current_page_num + 1) }}">❯</a>{% endif %}
    </div>
</div>

          
        

          
            /* Numbered Pagination */
.blog-pagination {
    display: block;
    text-align: center;
}
.blog-pagination > div {
    display: inline-block;
}
.blog-pagination-left {
    text-align: right;
}
.blog-pagination-right {
    text-align: left;
}
.blog-pagination a {
    display: inline-block;
    text-align: center;
    border-radius: 4px;
    padding: 5px 10px;
}
.blog-pagination a:hover,
.blog-pagination a:focus {
    background-color: #c8ecff;
    text-decoration: none;
}
.blog-pagination a.elipses {
    border: 0;
}
.blog-pagination a.active {
    background-color: #f5f5f5;
    color: #666;
    pointer-events: none;
    cursor: default;
}
.blog-pagination a.next-link,
.blog-pagination a.prev-link {
    background-color: #666;
    color: #fff;
}
.blog-pagination a.next-link:hover,
.blog-pagination a.prev-link:hover {
    background-color: #008cd4;
    color: #fff;
}