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

{% block content %}

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

    {% if page_obj %}
    <div class="flex flex-wrap justify-center gap-4">
        {% for gallery in page_obj %}
        <a href="{% url 'gallery_by_id' gallery.id %}" class="block w-full max-w-xs bg-base-200 rounded-lg overflow-hidden hover:opacity-80 transition-opacity">
            <img src="{{ gallery.get_main_photo_url }}" alt="{{ gallery.title }}" class="w-full aspect-[16/9] object-cover">
            <div class="p-3 text-center">
                <h2 class="font-semibold">{{ gallery.title }}</h2>
            </div>
        </a>
        {% endfor %}
    </div>

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

{% endblock content %}