{% extends "base.html" %}

{% block page_title %}Marketing Catalogs{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-7xl space-y-6 px-4 py-8 sm:px-6 lg:px-8" data-plugin="marketing-catalog">
    <header class="space-y-2">
        <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">Marketing Catalogs</h1>
        <p class="text-muted">Browse our latest collections.</p>
    </header>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {% for c in catalogs %}
        <article class="min-w-0 rounded-xl border border-divider bg-surface p-4 shadow-sm">
            <h2 class="break-words text-base font-semibold">{{ c.title }}</h2>
            {% if c.cover_title | default(value='') != '' %}<p class="mt-2 break-words text-sm text-muted">{{ c.cover_title }}</p>{% endif %}
        </article>
        {% endfor %}
    </div>
    {% if catalogs | length == 0 %}
    <div class="rounded-xl border border-dashed border-divider bg-surface px-5 py-8 text-center text-sm text-muted" role="status">
        No catalogs published yet. Check back soon.
    </div>
    {% endif %}
</main>
{% endblock %}