{% extends 'layouts/base.html' %}
{% load i18n %}
{% load pyaa %}

{% block content %}

{% url 'gallery_index' as url_gallery_index %}

<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-center mb-6">
        {{ gallery.title }}
    </h1>

    {% if page_obj %}
    <div id="gallery" class="flex flex-wrap justify-center gap-4">
        {% for photo in page_obj %}
        <a href="{{ photo.image.url }}" class="gallery-item block w-full max-w-xs bg-base-200 rounded-lg overflow-hidden">
            <img src="{{ photo.image.url }}" alt="{{ photo.caption|default:'' }}" class="w-full aspect-[16/9] object-cover">
            {% if photo.caption %}
            <div class="p-2 text-center">
                <p class="text-sm text-base-content/70">{{ photo.caption }}</p>
            </div>
            {% endif %}
        </a>
        {% endfor %}
    </div>

    {% include 'partials/paginator.html' %}
    {% else %}
    {% include 'partials/empty_data.html' %}
    {% endif %}

    <div class="text-center mt-6">
        <a href="{{ url_gallery_index }}" class="btn btn-ghost">
            {% translate "button.back" %}
        </a>
    </div>
</div>

{% endblock content %}