---
pagination:
  data: collections.posts
  size: 10
  alias: post
  reverse: true
permalink: "/posts{% if pagination.pageNumber != 0 %}/{{ pagination.pageNumber }}{% endif %}/"
layout: layout.liquid
title: Posts
css: posts.css
---

<div class="alternating-background-container alternating-primary-brown">
  <div>
    <div class="contaier">
      <h1 class="title text-center">All Posts</h1>
    </div>
  </div>
  <div class="container posts">
    {% for post in pagination.items %}
      <a href="{{ post.url }}">
        <div class="post-card">
          {% if post.data.thumbnail %}
            <img src="{{ post.data.thumbnail }}" alt="{{ post.data.title }}" />
          {% endif %}
          <div class="post-body">
            <p class="post-date">{{ post.date | date: "%B %-d, %Y" }}</p>
            <h1>{{ post.data.title }}</h1>
            <p>{{ post.data.context }}</p>
            <!-- <p>Views {} | Likes {}</p> -->
          </div>
        </div>
      </a>
    {% endfor %}
  </div>
</div>
<div class="container">
  <div class="pagination mb-2">
    {% if pagination.href.previous %}
      <a href="{{ pagination.href.previous }}">← Previous</a>
    {% endif %}

    Page {{ pagination.pageNumber | plus: 1 }} of {{ pagination.pages | size }}

    {% if pagination.href.next %}
      <a href="{{ pagination.href.next }}">Next →</a>
    {% endif %}
  </div>
</div>