{% extends "base.html" %}

{% block title %}Katalog Website | Albab Store{% endblock %}

{% block content %}

<!-- ============ JUDUL HALAMAN ============ -->
<section class="page-head">
    <div class="container">
        <h1>Katalog Website</h1>
        <p>Semua jenis website yang bisa kami buat. Klik <strong>Detail</strong> untuk info lengkap.</p>
    </div>
</section>

<!-- ============ KATALOG ============ -->
<section class="section">
    <div class="container">

        <!-- Filter kategori (dikerjakan JavaScript, tanpa reload) -->
        <div class="filter-bar reveal">
            <button class="filter-chip active" data-filter="all">Semua</button>
            {% for category in categories %}
                <button class="filter-chip" data-filter="{{ category.slug }}">{{ category.name }}</button>
            {% endfor %}
        </div>

        <!-- Grid produk -->
        <div class="catalog-grid" id="catalogGrid">
            {% for product in products %}
            <article class="catalog-card reveal"
                     data-category="{{ product.category_slug }}"
                     data-name="{{ product.name|lower }}">
                <a href="{{ url_for('product_detail', slug=product.slug) }}" class="catalog-thumb">
                    <img src="{{ url_for('static', filename='images/' + product.thumbnail) }}"
                         alt="Thumbnail {{ product.name }}" loading="lazy">
                    <span class="demo-cat">{{ product.category_name }}</span>
                </a>
                <div class="catalog-body">
                    <h3><a href="{{ url_for('product_detail', slug=product.slug) }}">{{ product.name }}</a></h3>
                    <p class="demo-price">{{ rupiah(product.price) }}<small> mulai</small></p>
                    <p class="catalog-desc">{{ product.description[:90] }}{% if product.description|length > 90 %}…{% endif %}</p>
                    <div class="demo-actions">
                        <a class="btn btn-primary btn-sm"
                           href="{{ url_for('demo', slug=product.demo_slug) }}"
                           target="_blank" rel="noopener">Lihat Demo</a>
                        <a class="btn btn-outline btn-sm"
                           href="{{ url_for('product_detail', slug=product.slug) }}">Detail</a>
                    </div>
                </div>
            </article>
            {% else %}
                <p class="empty-state">Belum ada produk. Cek kembali nanti.</p>
            {% endfor %}
        </div>

        <!-- Tampil jika filter tidak menemukan produk -->
        <p class="empty-state" id="noResult" hidden>Tidak ada produk pada kategori ini.</p>
    </div>
</section>

{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/katalog.js') }}"></script>
{% endblock %}