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

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

{% block content %}

<div class="grid-container">
    <div class="grid-x padding-top-1">
        <div class="cell large-3 medium-4 small-12">
            <a class="button" href="{% url 'gallery' %}">Zurück</a>
        </div>
        {% if request.user.is_authenticated %}
            {% if album.id %}
                <div class="cell large-3 medium-4 small-12">
                    <a class="button" href="{% url 'admin:gallery_album_change' album.id %}">Album bearbeiten</a>
                </div>
            {% else %}
                <div class="cell large-3 medium-4 small-12">
                    <a class="button" href="{% url 'admin:gallery_album_add' %}">neues Album hinzufügen</a>
                </div>
            {% endif %}
        {% endif %}
    </div>
    <hr>

    <div class="grid-x">
        <div class="cell">
            {{ album.title }}<br>
            {% if album.photographer %}
                Fotograf(en): {{ album.photographer }}<br>
            {% endif %}
            {% if album.event_date %}
                Datum: {{ album.event_date }}<br>
            {% endif %}
            {% if album.status == album.DRAFT %}
                DRAFT<br>
            {% endif %}
            {% if album.description %}
                <p>
                {{ album.description|safe }}
            {% endif %}
        </div>
    </div>
    <hr>

    <!-- 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-x">
        {% for image in images %}
            <a id="{{ image.title }}" href="{{ image.image_url }}" title="{{ image.title }}" class="cell large-2 medium-3 small-12">
                {% if image.thumb_url %}
                    <img src="{{ image.thumb_url }}" alt="{{ image.title }}">
                {% else %}
                    <img src="{{ image.image_url }}" alt="{{ image.title }}">
                {% endif %}
            </a>
        {% endfor %}
    </div>
</div>

<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 %}
