{% extends "album_detail.html" %}
{% load humanize %}
{% block album_detail %}
      <div class="row mb-2">
        <!-- Thumbnail carousel -->
        <div class="col-8">
          <div id="thumbnail-carousel" class="splide" aria-label="The carousel with thumbnails." >
            <div class="splide__track">
              <ul class="splide__list">
                {% for file in filter.qs %}
                <li class="splide__slide">
                  {% thumbnail file.thumbnail.source filetype=file.filetype width=200 ratio="16/9" %}
                </li>
                {% endfor %}
              </ul>
            </div>
          </div>
        </div>

        <!-- Metadata carousel -->
        <div class="col-4">
          <div id="metadata-carousel" class="splide" aria-label="The carousel with metadata." >
            <div class="splide__track">
              <ul class="splide__list">
                {% for file in filter.qs %}
                <li class="splide__slide">
                  <table class="table table-sm">
                      <tr><th>File</th><td>{{ file.title }} <a href="{% url 'files:file_detail' file_uuid=file.uuid %}">{{ file.uuid }}</a></td></tr>
                      <tr><th>Original File</th><td><a href="{{ file.original.url }}">Download</a> ({{ file.file_size|intcomma }} bytes, {{ file.mimetype }})</td></tr>
                      <tr><th>Attribution</th><td>{{ file.attribution }} (license: {{ file.license }})</td></tr>
                  </table>
                </li>
                {% endfor %}
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="col">
        <div id="main-carousel" class="splide" aria-label="Album carousel">
          <div class="splide__track">
            <ul class="splide__list">
              {% for file in filter.qs %}
              <li class="splide__slide">
                  <div class="row">
                    <div id="col">
                      {% render_file file.original img_alt=file.title img_loading="lazy" img_class="img-fluid" lg=8 sm=12 %}
                    </div>
                  </div>
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
{% endblock album_detail %}
