{% extends "base.html" %}
{% import "macros/workspace_ui.html" as ui %}

{% block page_title %}Video Galleries{% endblock %}

{% block content %}
<main class="blocks-workspace mx-auto w-full max-w-7xl space-y-6 px-4 py-6 text-foreground sm:px-6 sm:py-10" data-plugin="video_viewer">
    {{ ui::notice() }}
    <header class="max-w-3xl">
        <p class="text-sm font-semibold text-primary">Watch together</p>
        <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">Video galleries</h1>
        <p class="mt-2 text-sm leading-6 text-muted">Explore public video collections or open a private gallery with its shared access code.</p>
    </header>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:gap-6">
        {% for folder in folders %}
        <a href="/plugins/video_viewer/view?id={{ folder.id }}" class="group overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
            <div class="flex h-36 items-center justify-center bg-gradient-to-br from-primary to-secondary text-5xl text-white sm:h-44">
                <i class="fas fa-video" aria-hidden="true"></i>
            </div>
            <div class="space-y-4 p-4 sm:p-5">
                <div><h2 class="line-clamp-2 text-lg font-semibold text-foreground ">{{ folder.name }}</h2>
                <p class="mt-1 text-sm text-muted">Shared video collection</p></div>
                <div class="flex flex-wrap items-center justify-between gap-3">
                    <span class="badge {% if folder.access_type == "public" %}badge-green{% elif folder.access_type == "otp" %}badge-warning{% else %}badge-gray{% endif %}">{{ folder.access_type | title }}</span>
                    <span class="blocks-button blocks-button-secondary min-h-10">Watch videos <i class="fas fa-arrow-right ml-2" aria-hidden="true"></i></span>
                </div>
            </div>
        </a>
        {% else %}
        <section class="col-span-full rounded-2xl border border-dashed border-divider bg-surface px-5 py-10 text-center sm:px-8" aria-labelledby="video-galleries-empty-title">
            <i class="fas fa-video-slash text-4xl text-muted" aria-hidden="true"></i>
            <h2 id="video-galleries-empty-title" class="mt-4 text-lg font-semibold">No public galleries yet</h2>
            <p class="mx-auto mt-2 max-w-lg text-sm leading-6 text-muted">An administrator can create a video folder and make it available to viewers.</p>
            <a href="/plugins/video_viewer/admin" class="blocks-button blocks-button-primary mt-5">Manage video folders</a>
        </section>
        {% endfor %}
    </div>
</main>
{% endblock %}