{% extends "_layout.njk" %}

{% block stylesheets %}
<!-- Stylesheets -->
<link rel="stylesheet" href="../libs/bulma/bulma.min.css?v={{ globals.v3 }}">
<link rel="stylesheet" href="../css/style.css?v={{ globals.v1 }}">
<link rel="stylesheet" href="../css/thumbs.css?v={{ globals.v1 }}">
<link rel="stylesheet" href="../css/album.css?v={{ globals.v1 }}">
{% endblock %}

{% block scripts %}
{% if not nojs -%}
<!-- Scripts -->
<script src="../libs/lazyload/lazyload.min.js?v={{ globals.v3 }}"></script>
<script src="../js/album.js?v={{ globals.v1 }}"></script>
<script src="../js/s/utils.js?v={{ globals.v1 }}"></script>
{% endif %}
{% endblock %}

{% block opengraph %}
<!-- Open Graph tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ title | safe }} &#8211; {{ count }} files" />
<meta property="og:url" content="{{ url }}" />
<meta property="og:description" content="{{ description | safe }}" />
<meta property="og:image" content="{{ thumb }}" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{ title | safe }} &#8211; {{ count }} files">
<meta name="twitter:description" content="{{ description | safe }}">
<meta name="twitter:image" content="{{ thumb }}">
{% endblock %}

{% block content %}
{{ super() }}
<section class="section">
  <div class="container">
    <nav class="level">
      <div class="level-left">
        <div class="level-item">
          <h1 id="title" class="title">
            {{ title | safe }}
          </h1>
        </div>
        <div class="level-item">
          <h1 id="count" class="subtitle">
            {{ count }} files (<span class="file-size">{{ totalSize }} B</span>)
          </h1>
        </div>
      </div>

      {% if generateZips and files.length -%}
      <div class="level-right">
        <p class="level-item">
          {% if downloadLink -%}
          <a class="button is-primary is-outlined" title="Be aware that album archive may be cached by CDN" href="{{ downloadLink }}">Download album</a>
          {%- else -%}
          <a class="button is-primary is-outlined" title="The album's owner has chosen to disable download" disabled>Download disabled</a>
          {%- endif %}
        </p>
      </div>
      {%- endif %}
    </nav>

    {% if description -%}
    <h2 class="subtitle description">
      {{ description | safe }}
    </h2>
    {%- endif %}
    <hr>

    {% if nojs -%}
    <article class="message">
      <div class="message-body">
        <p>You are viewing No-JS version of this album, so file size will be displayed in bytes.</p>
        <p>Please <a href="{{ url }}">click here</a> if you want to its regular version.</p>
      </div>
    </article>
    {%- endif %}

    {% if files.length -%}
    <div id="table" class="columns is-multiline is-mobile is-centered has-text-centered">
      {% for file in files %}
        <div class="image-container column is-narrow">
          <a class="image" href="{{ file.file }}" target="_blank" rel="noopener">
            {% if file.thumb -%}
              {% if nojs -%}
              <img alt="{{ file.name }}" src="{{ file.thumb }}">
              {%- else -%}
              <img alt="{{ file.name }}" data-src="{{ file.thumb }}">
              {%- endif %}
            {%- else -%}
            <h1 class="title">{{ file.extname | default('N/A') }}</h1>
            {%- endif %}
          </a>
          <div class="details">
            <p><span class="name" title="{{ file.file }}">{{ file.name }}</span></p>
            <p class="file-size">{{ file.size }} B</p>
          </div>
        </div>
      {% endfor %}
    </div>
    {%- else -%}
    <article class="message">
      <div class="message-body">
        There are no files in the album.
      </div>
    </article>
    {%- endif %}
  </div>
</section>

{% if not nojs -%}
<noscript>
  <style>body > section:not(#noscript) { display: none !important; }</style>
  <section id="noscript" class="hero is-fullheight">
    <div class="hero-body">
      <div class="container has-text-centered">
        <p>You have JavaScript disabled, but this page requires JavaScript to function.</p>
        <p>Please <a href="{{ url }}?nojs">click here</a> if you want to view its No-JS version.</p>
      </div>
    </div>
  </section>
</noscript>
{%- endif %}
{% endblock %}