---
layout: default
title: Pagination
cover:  cover.jpg
---

{% capture title %}{% t titles.pagination %}{% endcapture %}

<div class="content" id="home">
  <div id="sidebar-button">
    <img src="/images/sidebar-button.png">
  </div>
  <div id="post-info">
    <div id="cover-photo-container">
      <img id="cover-photo" src="/images/{{ page.cover }}">
    </div>
    <div id="info-container">
      <h1 id="title">{{ title }}</h1>
    </div>
  </div>

  <div class="post">
    <div align="right">
      <!-- Adds links to other languages on the post -->
      {% for lang in site.languages %}
        {% unless site.lang == lang %}
          {% if lang == site.default_lang and site.default_locale_in_subfolder != true %}
            <a href="{{ site.baseurl_root }}{{ page.url }}" >{% t langs.{{ lang }} %}</a>
          {% else %}
            <a href="{{ site.baseurl_root }}/{{ lang }}{{ page.url }}" >{% t langs.{{ lang }} %}</a>
          {% endif %}
          
          {% assign next = forloop.index | plus: 1 %}
          
          {% if forloop.last != true and site.languages[forloop.index] != site.lang or site.languages[forloop.index] == site.lang and next < forloop.length %}
            <span class="separator"> &bull; </span>
          {% endif %}
          
        {% endunless %}
      {% endfor %}
    </div>

    <!-- This loops through the paginated posts -->
    {% for post in paginator.posts %}
      <h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
      <div class="content">
        {{ post.content }}
      </div>
    {% endfor %}

    <!-- Pagination links -->
    <div class="pagination">
      {% if paginator.previous_page %}
        <a href="{{ site.baseurl }}{{ paginator.previous_page_path }}" class="previous">Previous</a>
      {% else %}
        <span class="previous">Previous</span>
      {% endif %}
      <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
      {% if paginator.next_page %}
        <a href="{{ site.baseurl }}{{ paginator.next_page_path }}" class="next">Next</a>
      {% else %}
        <span class="next ">Next</span>
      {% endif %}
    </div>
  </div>
</div>
