{% extends 'base.html' %}

{% block title %}Gallery{% endblock %}

{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
    <h1 class="page-title">Fotos</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-items-center gap-4">
        {% for album in albums %}
            {% if album.status == "10" %}
                <a href="{% url 'draft-album' album.slug %}" class="block max-w-xs sm:max-w-none">         
            {% else %}
                <a href="{% url 'album' album.slug %}" class="block max-w-xs sm:max-w-none">
            {% endif %}
                    <img src="{{ album.thumbnail }}" class="rounded">
                    <h2 class="px-2 text-proprietary-dark dark:text-sky-300">{{ album.title }}</h2>
                    <h3 class="px-2 text-sm text-proprietary dark:text-sky-400 font-normal"><i class="fa-regular fa-calendar-day mr-1"></i>{{ album.event_date }}</h3>
                </a>
        {% endfor %}

    </div>

    {% if request.user.is_authenticated %}
        <a href="{% url 'admin:gallery_album_add' %}" class="self-center sm:self-end btn-small btn-primary w-full sm:w-auto max-w-sm">
            <i class="fa-regular fa-pen-to-square mr-1"></i>neues Album hinzufügen
        </a>
    {% endif %}
</main>
{% endblock %}
