{% extends 'base.njk' %}
{% block head %}
  {% if tag %}<meta property="og:url" content="{{base_url}}/gallery/{{tag}}">{% endif %}
  <meta property="og:description" content="hyshare gallery with {{hashes|length}} files"/>
{% endblock %}
{% block body %}
  <div class="container mx-auto my-8 px-4 grow">
    <div class="flex flex-row flex-wrap items-end mb-4 gap-2">
      <h1 class="text-3xl font-semibold">
        {{ title }}
      </h1>
      <span class="badge badge-lg badge-outline mb-1">{{hashes|length}} files</span>
      <div class="grow"></div>
      {% if appConfig.galleryDownloadEnabled %}
        <a class="btn btn-sm btn-outline gap-2 mb-1" {% if hashes|length < 1 %}disabled{% endif %} href="/gallery/{{tag}}/download" download title="Download gallery as zip">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
          Download ZIP
        </a>
        {% endif %}
    </div>
    {% for hash in hashes %}
      {% if loop.first %}
        <div class="grid grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-2 mx-auto">
      {% endif %}
      <a href="/view/{{hash}}" class="bordered card overflow-hidden">
        <img 
            src="/thumbnail/{{hash}}" 
            class="{% if appConfig.fullThumbs %} object-contain {% else %} object-cover {% endif %} w-full h-full aspect-square"
            loading="lazy"
          >
      </a>
      {% if loop.last %}
        </div>
      {% endif %}
    {% else %}
      <div class="hero h-full w-full">
        <div class="hero-content flex-col">
          <h1 class="sm:text-5xl font-bold text-3xl text-center">No Files Found</h1>
        </div>
      </div>
    {% endfor %}
  </div>
{% endblock %}