{% extends 'katalog/base_katalog.html' %}{% load rp_format %}
{% block title %}Katalog · {{ toko.nama }}{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 pt-8">
  <div class="flex items-center gap-4 hero-anim">
    {% if merek_aktif and merek_aktif.logo %}<img src="{{ merek_aktif.logo.url }}" class="h-12 object-contain">{% endif %}
    <div><h1 class="text-4xl font-black tracking-tight">{% if merek_aktif %}{{ merek_aktif.nama }}{% else %}Katalog{% endif %}<span class="text-red-600">.</span></h1>
    <p class="text-neutral-500 text-sm mt-1">{{ total_produk }} produk{% if q %} untuk "{{ q }}"{% endif %}{% if merek_aktif and merek_aktif.deskripsi %} · {{ merek_aktif.deskripsi }}{% endif %}</p></div>
  </div>
  {% if merek_list|length > 1 %}
  <div class="flex gap-2 overflow-x-auto mt-5 pb-1 hero-anim" style="--d:.1s">
    <a href="{% url 'katalog:katalog' %}" class="chip {% if not merek_f %}on{% endif %}">Semua merek</a>
    {% for m in merek_list %}<a href="{% url 'katalog:katalog' %}?merek={{ m.slug }}{% if kategori_f %}&kategori={{ kategori_f }}{% endif %}" class="chip {% if merek_f == m.slug %}on{% endif %}">{% if m.logo %}<img src="{{ m.logo.url }}" class="h-4 mr-1.5 object-contain">{% endif %}{{ m.nama }}</a>{% endfor %}
  </div>
  {% endif %}

  <form class="mt-4 grid md:grid-cols-12 gap-2" id="fFilter">
    {% if merek_f %}<input type="hidden" name="merek" value="{{ merek_f }}">{% endif %}
    <input name="q" value="{{ q }}" placeholder="Cari merek atau tipe sepatu..." class="k-input md:col-span-5">
    <select name="kategori" class="k-input md:col-span-3" onchange="this.form.submit()"><option value="">Semua kategori</option>{% for k in kategori_list %}<option value="{{ k.slug }}" {% if kategori_f == k.slug %}selected{% endif %}>{{ k.nama }}</option>{% endfor %}</select>
    <select name="ukuran" class="k-input md:col-span-1" onchange="this.form.submit()"><option value="">Ukuran</option>{% for u in ukuran_list %}<option value="{{ u }}" {% if ukuran_f == u %}selected{% endif %}>{{ u }}</option>{% endfor %}</select>
    <select name="sort" class="k-input md:col-span-2" onchange="this.form.submit()"><option value="terbaru" {% if sort == 'terbaru' %}selected{% endif %}>Terbaru</option><option value="termurah" {% if sort == 'termurah' %}selected{% endif %}>Harga terendah</option><option value="termahal" {% if sort == 'termahal' %}selected{% endif %}>Harga tertinggi</option><option value="nama" {% if sort == 'nama' %}selected{% endif %}>Nama A-Z</option></select>
    <button class="k-btn k-btn-dark md:col-span-1"><i class="fas fa-search"></i></button>
    <div class="md:col-span-12 flex flex-wrap items-center gap-2 text-sm">
      <label class="chip cursor-pointer {% if ready %}on{% endif %}"><input type="checkbox" name="ready" value="1" {% if ready %}checked{% endif %} onchange="this.form.submit()" class="hidden"> <i class="fas fa-check mr-1.5 {% if not ready %}opacity-0{% endif %}"></i>Hanya ready stock</label>
      <input name="hmin" value="{{ hmin }}" placeholder="Harga min" class="k-input w-32" style="padding:6px 10px;font-size:12px"><span class="text-neutral-400">-</span><input name="hmax" value="{{ hmax }}" placeholder="Harga max" class="k-input w-32" style="padding:6px 10px;font-size:12px">
      {% if q or merek_f or kategori_f or ukuran_f or hmin or hmax or ready %}<a href="{% url 'katalog:katalog' %}" class="chip"><i class="fas fa-times mr-1"></i>Reset filter</a>{% endif %}
    </div>
  </form>

  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-8">
    {% for p in page %}{% include 'katalog/_card.html' %}
    {% empty %}<div class="col-span-full text-center py-20 text-neutral-400"><i class="fas fa-shoe-prints text-4xl mb-3 block opacity-30"></i>Tidak ada produk yang cocok.<br><a href="{% url 'katalog:katalog' %}" class="font-bold text-black hover:underline">Lihat semua produk</a></div>{% endfor %}
  </div>

  {% if page.paginator.num_pages > 1 %}
  <div class="flex items-center justify-center gap-2 mt-10">
    {% if page.has_previous %}<a href="?{% for k,v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v|urlencode }}&{% endif %}{% endfor %}page={{ page.previous_page_number }}" class="k-btn k-btn-outline">&larr; Sebelumnya</a>{% endif %}
    <span class="text-sm text-neutral-500">Hal. {{ page.number }} / {{ page.paginator.num_pages }}</span>
    {% if page.has_next %}<a href="?{% for k,v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v|urlencode }}&{% endif %}{% endfor %}page={{ page.next_page_number }}" class="k-btn k-btn-outline">Berikutnya &rarr;</a>{% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}