{% extends "layout.html" %}

{% block content %}
{% if pages|count > 1 %}
<nav aria-label="Page navigation" class="pull-right clearfix">
  <ul class="pagination">
    <li class="page-item{% ifequal current-page 1 %} disabled{% endifequal %}">
      <a class="page-link" href="/page/{{ current-page|dec }}">
        <span class="fa fa-arrow-left"></span>
        Zurück
      </a>
    </li>
    
    {% for page in pages %}
    <li class="page-item{% ifequal page current-page %} active{% endifequal %}">
      <a class="page-link" href="/page/{{ page }}">{{ page }}</a>
    </li>
    {% endfor %}

    <li class="page-item{% ifequal current-page pages|count %} disabled{% endifequal %}">
      <a class="page-link" href="/page/{{ current-page|inc }}">
        Weiter
        <span class="fa fa-arrow-right"></span>
      </a>
    </li>
  </ul>
</nav>
<div class="clearfix"></div>
<hr>
{% endif %}

<div class="clearfix d-flex justify-content-center flex-wrap">
  {% for image in images %}
    <a href="/show/{{ image.id }}" class="thumbnail-image">
      <img src="/images/thumbnails/{{ image.hash }}.png" alt="{{ image.title }}">
    </a>
  {% endfor %}
</div>
  
{% endblock %}