{% extends tpl/layout.html %}

{% block title %}{{ $page }}/{{ $last_page }} | {{ $imagename }}{% endblock %}

{% block content %}

<div class="container">
  {% if(!empty($tags)): %}
  <div class="content-single">
  {% else: %}
  <div class="content-single notags">
  {% endif %}
  {% if(str_starts_with($filetype, 'video/')): %}
    <div class="single-video">
      <video controls loop>
        <source src='{{ $imageurl }}' type='{{ $filetype }}'>
      </video>
    </div>
  {% else: %}
    <div class="single-image">
      <img src='{{ $imageurl }}' title="{{ $page }}/{{ $last_page }}" />
    </div>
    {% if ($page > 1): %}
    <a class="clickable clickable-left" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
      <div></div>
    </a>
    {% endif %}
    <a class="clickable clickable-center" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}">
      <div></div>
    </a>
    {% if ($page < $last_page): %}
    <a class="clickable clickable-right" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
      <div></div>
    </a>
    {% endif %}
  {% endif %}
  </div>
  <div class="page-footer">
    <div class="footer-nav footer-nav-left">
      {% if ($page > 1): %}
      <a id="link-prev" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-left"></i>&nbsp;</a>
      {% endif %}
      <a id="link-home" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-up"></i>&nbsp;</a>
    </div>
    <div class="tags">
    {% foreach($tags as $tag): %}
    <a href="/index.php?d={{ $dir }}&so={{ $sort }}&s={{ $gallery_slice }}&f={{{ $tag }}}"><span class="tag">{{ $tag }}</span></a>
    {% endforeach %}
    </div>
    <div class="footer-nav footer-nav-right">
      {% if ($page < $last_page): %}
      <a id="link-next" href="/index.php?d={{ $dir }}&so={{ $sort }}&p={{ $next_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">&nbsp;<i class="fa fa-caret-right"></i>&nbsp;</a>
      {% endif %}
    </div>
  </div>
  </div>
</div>
{% endblock %}