{% extends "photologue/gallery_detail.html" %}
{% load i18n %}

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

{% block content %}
<div class="row">
    <div class="medium-9 columns">
        {% if gallery.content.exists %}
        <h6 class="page-header"><a href="{{ gallery.content.all.0.get_absolute_url }}">Back to {{ gallery.content.all.0.title }}</a></h6>
        {% endif %}
        <h5>{{ gallery.title }}</h5>
        <ul class="slider1">
            {% for photo in gallery.public %}
            <li id="slide-{{photo.slug}}">
                <img src="{{ photo.get_display_url }}" alt="{{ photo.title }}" loading="lazy">
                <p>
                    {{ photo.caption|safe }}
                    {% if photo.caption %}<br>{%endif%}
                    {% if request.user.is_staff %}<a href="{{ photo.image.url }}" class="original-link" target="_blank" >Link to original file</a>{% endif %}
                </p>

            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="medium-3 columns">
        <br>
        <p>{% trans "Other photos" %}:</p>
        <div>
                {% for photo in gallery.public %}
                <div style="float: left; padding: 4px">
                    <a href="{{ photo.get_absolute_url }}" class="select-image" data-id="{{forloop.counter}}">
                        <img src="{{ photo.get_thumbnail_url }}" class="thumbnail" alt="{{ photo.title }}">
                    </a>
                </div>
                {% endfor %}
        </div>
    </div>
</div>

{% endblock %}