{% extends "base.html" %}

{% block content %}
<main class="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <header class="mb-8">
        <h1 class="text-3xl font-bold tracking-tight text-[var(--text-main)]">Public Slideshows</h1>
        <p class="mt-2 text-base text-[var(--text-muted)]">Explore shared photo collections from our community.</p>
    </header>

    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {% for folder in folders %}
        <article class="overflow-hidden rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
            <div class="flex h-40 items-center justify-center bg-gradient-to-br from-[var(--primary)] to-[var(--brand-purple)] text-5xl text-white" aria-hidden="true">
                <i class="fas fa-images"></i>
            </div>
            <div class="p-5">
                <h2 class="text-lg font-semibold text-[var(--text-main)]">{{ folder.name }}</h2>
                <p class="mt-1 mb-4 text-sm text-[var(--text-muted)]">by {{ folder.user_id }}</p>
                {% if folder.access_type == 'otp' %}
                <div class="mb-3 block rounded-md bg-[var(--badge-gray-bg)] px-3 py-2 text-center text-sm text-[var(--badge-gray-text)]">
                    <i class="fas fa-lock"></i> OTP Required
                </div>
                {% endif %}
                <a href="/plugins/slideshow/view?id={{ folder.id }}" class="inline-flex min-h-11 w-full items-center justify-center rounded-lg bg-[var(--primary)] px-4 py-2 font-semibold text-white transition  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--primary)]">View Slideshow</a>
            </div>
        </article>
        {% else %}
        <div class="col-span-full rounded-xl border border-dashed border-[var(--border-color)] px-6 py-14 text-center text-[var(--text-muted)]">
            <i class="fas fa-camera-retro mb-3 text-3xl" aria-hidden="true"></i>
            <p>No public slideshows available yet.</p>
        </div>
        {% endfor %}
    </div>
</main>
{% endblock %}