{% extends "piggyback/base.html" %}

{% block title %}Card Shop{% endblock %}

{% block content %}
<div class="pb-container pb-page-header">
  <h1>Card Shop</h1>
  <p id="catalog-count">{{ page_obj.paginator.count }} designs to personalise</p>
</div>

<div class="pb-container pb-catalog-layout">
  <aside class="pb-filters">
    <h3>Occasions</h3>
    <a href="{% url 'piggyback:catalog' %}"
       class="pb-filter {% if not selected_occasion %}active{% endif %}"
       hx-get="{% url 'piggyback:catalog' %}"
       hx-target="#template-grid"
       hx-select="#template-grid"
       hx-swap="outerHTML"
       hx-push-url="true">All</a>
    {% for occasion in occasions %}
      <a href="?occasion={{ occasion.slug }}"
         class="pb-filter {% if selected_occasion == occasion.slug %}active{% endif %}"
         hx-get="?occasion={{ occasion.slug }}"
         hx-target="#template-grid"
         hx-select="#template-grid"
         hx-swap="outerHTML"
         hx-push-url="true">
        {{ occasion.category.icon }} {{ occasion.name }}
      </a>
    {% endfor %}

    <h3>Style</h3>
    {% for value, label in card_styles %}
      <a href="?style={{ value }}{% if selected_occasion %}&occasion={{ selected_occasion }}{% endif %}"
         class="pb-filter {% if selected_style == value %}active{% endif %}"
         hx-get="?style={{ value }}{% if selected_occasion %}&occasion={{ selected_occasion }}{% endif %}"
         hx-target="#template-grid"
         hx-select="#template-grid"
         hx-swap="outerHTML"
         hx-push-url="true">{{ label }}</a>
    {% endfor %}
    <span class="htmx-indicator pb-loading" aria-hidden="true"></span>
  </aside>

  {% include "piggyback/partials/template_grid.html" %}
</div>

{% include "piggyback/partials/catalog_pagination.html" %}
{% endblock %}