{% extends "photologue/root.html" %}
{% load static i18n %}

{% block title %}{{ gallery.title }}{% endblock %}

{% block extracss %}
<link rel="stylesheet" href="{% static 'lightgallery/css/lightgallery.css' %}" />
<link rel="stylesheet" href="{% static 'lightgallery/css/lg-zoom.css' %}" />
<link rel="stylesheet" href="{% static 'lightgallery/css/lg-thumbnail.css' %}" />
{% endblock %}

{% block extrajs %}
<script src="{% static 'lightgallery/lightgallery.min.js' %}"></script>
<script src="{% static 'lightgallery/plugins/thumbnail/lg-thumbnail.min.js' %}"></script>
<script src="{% static 'lightgallery/plugins/zoom/lg-zoom.min.js' %}"></script>
<script>
    lightGallery(document.getElementById('lightgallery'), {
        plugins: [lgZoom, lgThumbnail]
    });
</script>
{% endblock %}

{% block content %}
<h1>{{ gallery.title }}</h1>
<p class="text-muted small">{% trans "Published" %} {{ gallery.date_added }}</p>
{% if gallery.description %}<p>{{ gallery.description|safe }}</p>{% endif %}
<div class="gallery-list mb-3" id="lightgallery">
    {% for photo in gallery.public %}
    <a href="{{ photo.get_absolute_url }}" data-src="{{ photo.get_display_url }}" data-download-url="{{ photo.image.url }}">
        <img src="{{ photo.get_thumbnail_url }}" class="img-thumbnail" alt="{{ photo.title }}">
    </a>
    {% endfor %}
</div>
<a href="#" class="btn btn-secondary">{% trans 'Download all gallery' %}</a>
{% endblock %}