---
layout: layouts/base.njk
title: "Posts :3"
override:tags: []
templateEngineOverride: 'njk'
pagination:
    data: collections.post
    size: 6
    alias: posts
---

<div class="flex flex-col items-center">
    <div id="post-container" class="w-2/3 flex flex-col items-center">
        {% for post in posts %}
        <div class="post transition-all duration-300 hover:scale-110">
            <a class="text-off-white hover:text-pink-500" href="{{ post.url }}">
                <h2 class="text-2xl text-pink-300">{{ post.data.title }}</h2>
                <div class="text-justify text-base leading-snug">  {{ post.templateContent | striptags(true) | truncatewords(20) | safe }} </div>
                <p class="text-sm text-purple-300"> {{ post.date | string | truncate(15, true, "")}} </p>
            </a>
        </div>
        {% if not loop.last %}
        <hr class="mt-4 mb-3 w-8 h-0.5 bg-gray-100 opacity-40 rounded">
        {% endif %}
        {% endfor %}
    </div>
    <div class="inline-flex flex-row items-center mt-4">
        {% if pagination.pageNumber >= 2 %}
        <a id="first" class="mx-3" href="{{ pagination.href.first }}">1</a>
        {% if pagination.pageNumber > 2 %}
        <span>…</span>
        {% endif %}
        {% endif %}
        {% if pagination.pageNumber >= 1 %}
        <a id="prev" class="mx-3" href="{{ pagination.href.previous }}">{{ pagination.pageNumber }}</a>
        {% endif %}
        <span class="mx-3" id="curr">{{ pagination.pageNumber + 1 }}</span>
        {% if pagination.page.next %}
        <a id="next" class="mx-3" href="{{ pagination.href.next }}">{{ pagination.pageNumber + 2 }}</a>
            {% if pagination.pageNumber + 2 < pagination.pages.length %}
                {% if pagination.pageNumber + 3 < pagination.pages.length %}
                    <span>…</span>
                {% endif %}
                <a id="last" class="mx-3" href="{{ pagination.href.last }}">{{ pagination.pages.length }}</a>
            {% endif %}
        {% endif %}
    </div>
</div>