{% extends 'base.html' %}
{% load static %}

{% block title %}FET: {{ album.title }}{% endblock %}

{% block galleryheader %}
    <link rel="stylesheet" href="{% static 'Gallery-3.3.0/css/blueimp-gallery.min.css' %}">
{% endblock %}

{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
    <h1 class="page-title">Fotos</h1>

    <a href="{% url 'gallery' %}" class="self-center sm:self-end btn-small btn-primary w-full sm:w-auto max-w-sm">
        <i class="fa-regular fa-pen-to-square mr-1"></i>Zurück
    </a>

    {% if request.user.is_authenticated %}
        {% if album.id %}
            <a href="{% url 'admin:gallery_album_change' album.id %}" class="self-center sm:self-end btn-small btn-primary w-full sm:w-auto max-w-sm">
                <i class="fa-regular fa-pen-to-square mr-1"></i>Album bearbeiten
            </a>
        {% else %}
            <a href="{% url 'admin:gallery_album_add' %}" class="self-center sm:self-end btn-small btn-primary w-full sm:w-auto max-w-sm">
                <i class="fa-regular fa-pen-to-square mr-1"></i>neues Album hinzufügen
            </a>
        {% endif %}
    {% endif %}

    <section class="text-gray-800 dark:text-gray-200 my-2 sm:my-4">
        <h2 class="text-gray-900 dark:text-gray-100 text-lg font-medium tracking-wide"><i class="fa-solid fa-eye-slash text-gray-600 dark:text-gray-300 mr-2" title="Album ist nicht öffentlich!"></i>{{ album.title }}</h2>
        {% if album.photographer %}
            <span class="block"><i class="fa-solid fa-camera fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Fotograf:"></i>{{ album.photographer }}</span>
        {% endif %}
        {% if album.event_date %}
            <span class="block"><i class="fa-solid fa-calendar-day fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Datum:"></i>{{ album.event_date }}</span>
        {% endif %}
        <span class="block"><i class="fa-solid fa-location-dot fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Ort:"></i>Gußhaus 27 - 1040, Wien</span>
        {% if album.status == album.DRAFT %}
            DRAFT<br>
        {% endif %}
        {% if album.description %}
            <div class="db-page-content-left mt-2">
                <p>{{ album.description|safe }}</p>
            </div>
        {% endif %}
    </section>
    <!-- The Gallery as lightbox dialog, should be a document body child element -->
    <div id="blueimp-gallery" class="blueimp-gallery" aria-label="image gallery" aria-modal="true" role="dialog">
        <div class="slides" aria-live="polite"></div>
        <h3 class="title"></h3>
        <a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft" ></a>
        <a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a>
        <a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a>
        <a class="play-pause" aria-controls="blueimp-gallery" aria-label="play slideshow" aria-keyshortcuts="Space" aria-pressed="false" role="button"></a>
        <ol class="indicator"></ol>
        </div>
    
        <div id="links" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 justify-items-center gap-3">
            {% for image in images %}
                <a id="{{ image.title }}" href="{{ image.image_url }}" title="{{ image.title }}" class="block max-w-xs sm:max-w-none">
                    {% if image.thumb_url %}
                        <img src="{{ image.thumb_url }}" alt="{{ image.title }}" class="rounded-sm">
                    {% else %}
                        <img src="{{ image.image_url }}" alt="{{ image.title }}" class="rounded-sm">
                    {% endif %}
                </a>
            {% endfor %}
        </div>
    </div>
</main>

<script src="{% static 'Gallery-3.3.0/js/blueimp-gallery.min.js' %}"></script>
<script>
  document.getElementById('links').onclick = function (event) {
    event = event || window.event
    var target = event.target || event.srcElement
    var link = target.src ? target.parentNode : target
    var options = { index: link, event: event }
    var links = this.getElementsByTagName('a')
    blueimp.Gallery(links, options)
  }
</script>

{% endblock %}