{% 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 %}
<div class="row">
    <div class="col-lg-12">
        <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" 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>
    </div>
</div>
{% endblock %}