{% extends tpl/layout.html %}

{% block title %}Gallery{% endblock %}

{% block content %}
<div class="container">
  <div class="page-header">
    <nav class="title navbar">
      <ul class nav-links>
        <input type="checkbox" id="checkbox_toggle" />
        <label for="checkbox_toggle" class="hamburger">&#9776;</label>
        <div class="menu">
          <li><a href="{{ $startpage }}">{{ $galleryname }}</a></li>
          {% if (!empty($crumbs)): %}
          {% foreach($crumbs as $name => $path): %}
          <li><a class="crumb" href="index.php?d={{ $path }}&so={{ $sort }}&s={{ $slice }}&p=1">/ {{ $name }}</a></li>
          {% endforeach %}
          {% endif %}
        </div>
      </ul>
    </nav>
    <div class="search">
      <form action="index.php" method="get">
        <input type="text" placeholder="Suche.." value="{{ $pretty_filter }}" name="f" />
        <button type="submit"><i class="fa fa-search"></i></button>
        <input type="hidden" name="d" value="{{ $dir }}">
        <input type="hidden" name="s" value="{{ $slice }}">
        <input type="hidden" name="so" value="{{ $sort }}">
      </form>
    </div>
  </div>
  <div class="content">
  {% if(!empty($dirs)): %}
  {% foreach($dirs as $d): %}
    <div class="multi-image">
      <a href="index.php?d={{ $dir }}/{{ $d }}&so={{ $sort }}&s={{ $slice }}&p=1">
        <img src="./img/folder.png" alt="{{ $d }}"/>
        <p class="dirname">{{ $d }}</p>
      </a>
    </div>      
  {% endforeach %}
  {% endif %}
  {% if(!empty($images)): %}
  {% foreach($images as $image): %}
    <div class="multi-image">
      <a href="index.php?d={{ $dir }}&so={{ $sort }}&s=1&gs={{ $slice }}&p={{ $image['i'] }}{{ $filter }}">
        <img src="{{ $image['t'] }}" alt="{{ $image['n'] }}"/>
      </a>
    </div>
  {% endforeach %}
  {% endif %}
  </div>
  <div class="page-footer">
    {% if ($page > 1): %}
    <a id="link-first" href="/index.php?d={{ $dir }}&so={{ $sort }}&p=1&s={{ $slice }}{{ $filter }}">1</a>
    <a id="link-prev" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-left"></i>&nbsp;</a>
    {% endif %}
    
    {% if ($sort == 1): %}
    <a class="info" href="/index.php?d={{ $dir }}&so=0&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-down"></i>&nbsp;{{ $page }}</a>
    {% else: %}
    <a class="info" href="/index.php?d={{ $dir }}&so=1&p={{ $page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-up"></i>&nbsp;{{ $page }}</a>
    {% endif %}
    {% if ($page < $last_page): %}
    <a id="link-next" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s={{ $slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-right"></i>&nbsp;</a>
    <a id="link-last" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $last_page }}&s={{ $slice }}{{ $filter }}">{{ $last_page }}</a>
    {% endif %}
  </div>
</div>
{% endblock %}