{% extends "base.html" %}
{% block content %}

<h1 class="mm-section-title">Store</h1>

<!-- Filter bar -->
<div class="mm-filterbar mb-4">
  <div class="d-flex flex-wrap align-items-center gap-2">
    <a class="mm-chip {% if not cslug %}active{% endif %}" href="{% url 'store' %}?{% if q %}q={{ q }}{% endif %}">All</a>
    {% for c in categories %}
      <a class="mm-chip {% if cslug == c.slug %}active{% endif %}"
         href="{% url 'store' %}?category={{ c.slug }}{% if q %}&q={{ q }}{% endif %}">
        {{ c.name }}
      </a>
    {% endfor %}
  </div>
</div>

{% if q %}
  <div class="text-muted mb-3">Search: “{{ q }}” — {{ page.paginator.count }} result(s)</div>
{% endif %}

<div class="row g-3">
  {% for p in page.object_list %}
    <div class="col-6 col-md-4 col-lg-3">
      <div class="mm-card h-100 d-flex flex-column">
        {% if p.thumbnail %}
          <img src="{{ p.thumbnail.url }}" class="mm-thumb w-100" alt="{{ p.title }}">
        {% else %}
          <div class="mm-thumb d-flex align-items-center justify-content-center text-muted">No Image</div>
        {% endif %}
        <div class="p-3 d-flex flex-column gap-2">
          <div class="mm-title"><a href="{% url 'product_detail' p.slug %}" class="text-decoration-none">{{ p.title }}</a></div>
          <div class="d-flex justify-content-between align-items-center">
            <small class="mm-cat">{{ p.category.name }}</small>
            <span class="mm-stars">★ {{ p.rating|floatformat:1 }}</span>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <div class="mm-price">$ {{ p.price }}</div>
            <form action="{% url 'add_to_cart' p.slug %}" method="post">
              {% csrf_token %}<input type="hidden" name="qty" value="1"><button class="mm-btn btn-sm">Add</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  {% empty %}
    <p>No products.</p>
  {% endfor %}
</div>

<!-- Pagination -->
<nav class="mt-4">
  <ul class="pagination">
    {% if page.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page.previous_page_number }}{% if cslug %}&category={{ cslug }}{% endif %}{% if q %}&q={{ q }}{% endif %}">Prev</a></li>
    {% else %}
      <li class="page-item disabled"><span class="page-link">Prev</span></li>
    {% endif %}

    <li class="page-item disabled"><span class="page-link">Page {{ page.number }} of {{ page.paginator.num_pages }}</span></li>

    {% if page.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page.next_page_number }}{% if cslug %}&category={{ cslug }}{% endif %}{% if q %}&q={{ q }}{% endif %}">Next</a></li>
    {% else %}
      <li class="page-item disabled"><span class="page-link">Next</span></li>
    {% endif %}
  </ul>
</nav>

{% endblock %}