{% block content %}
<div class="font-sans text-center px-10 w-full md:w-2/3 lg:w-1/2 mx-auto">
  <h1 class="tracking-tight pt-12 lg:pt-24 2xl:pt-32 text-5xl">{{ section.title }}</h1>
  <div class="post-line"></div>
  <div>
    <p class="text-center text-sm mt-2 mb-2">
    {% if paginator.previous %}
      <a class="border-transparent" aria-label="First page" href="{{ paginator.first }}">{% include "partials/svgPrevPageIcon.html" %}{% include "partials/svgPrevPageIcon.html" %}</a>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a class="border-transparent" aria-label="Previous page" href="{{ paginator.previous }}">{% include "partials/svgPrevPageIcon.html" %}</a>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    {% else %}
      {% include "partials/svgFirstPageIcon.html" %}{% include "partials/svgFirstPageIcon.html" %}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      {% include "partials/svgFirstPageIcon.html" %}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    {% endif %}
    {% if paginator.next %}
      <a class="border-transparent" aria-label="Next page" href="{{ paginator.next }}">{% include "partials/svgNextPageIcon.html" %}</a>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a class="border-transparent" aria-label="Last page" href="{{ paginator.last }}">{% include "partials/svgNextPageIcon.html" %}{% include "partials/svgNextPageIcon.html" %}</a>
    {% else %}
      {% include "partials/svgLastPageIcon.html" %}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      {% include "partials/svgLastPageIcon.html" %}{% include "partials/svgLastPageIcon.html" %}
    {% endif %}
    </p>
    <hr class="mt-2 mb-6" />
    {%- for post in paginator.pages %}
        {% include "partials/postCard.html" %}
    {%- endfor %}
    <hr class="mt-6" />
    <p class="text-center text-sm mt-2 mb-16">
      {% if paginator.previous %}
        <a class="border-transparent" aria-label="First page" href="{{ paginator.first }}">{% include "partials/svgPrevPageIcon.html" %}{% include "partials/svgPrevPageIcon.html" %}</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="border-transparent" aria-label="Previous page" href="{{ paginator.previous }}">{% include "partials/svgPrevPageIcon.html" %}</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      {% else %}
        {% include "partials/svgFirstPageIcon.html" %}{% include "partials/svgFirstPageIcon.html" %}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        {% include "partials/svgFirstPageIcon.html" %}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      {% endif %}
      {% if paginator.next %}
        <a class="border-transparent" aria-label="Next page" href="{{ paginator.next }}">{% include "partials/svgNextPageIcon.html" %}</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="border-transparent" aria-label="Last page" href="{{ paginator.last }}">{% include "partials/svgNextPageIcon.html" %}{% include "partials/svgNextPageIcon.html" %}</a>
      {% else %}
        {% include "partials/svgLastPageIcon.html" %}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        {% include "partials/svgLastPageIcon.html" %}{% include "partials/svgLastPageIcon.html" %}
      {% endif %}
      </p>
    </div>
  </div>    {% endblock content %}