{% extends "base.html" %}
{% block content %}
<h1 class="h4 mb-3">{{ category.name }}</h1>

<div class="row g-3">
  {% for p in products %}
  <div class="col-6 col-md-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 }}">
      {% 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 mt-1">
          <div class="mm-price">{{ p.price }} <span class="text-muted">تومان</span></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">افزودن</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  {% empty %}<p>محصولی وجود ندارد.</p>{% endfor %}
</div>
{% endblock %}