{% load card_badge %}
{% comment %}
  This partial expects:
    - cards: a list of card objects
    - mode: a string that determines the render style.
      It should be "offered" for Most Offered Cards and "wanted" for Most Wanted Cards.
    - Optional:
        'show_zero' flag (default False): if True, also display cards with 0 offers.
        'layout' variable: if set to "auto", use an auto-fit grid based on available horizontal space.
{% endcomment %}
{% if cards %}
    <div class="mx-4 grid gap-3 grid-cols-[repeat(auto-fit,minmax(150px,1fr))] justify-items-center">
    {% for card in cards %}
      {% if mode == "offered" %}
      <a href="{% url 'cards:card_detail' card.id %}"
      {% else %}
      <a href="{% url 'cards:card_detail' card.id %}"
      {% endif %}
        class="flex justify-between items-center text-primary no-underline">
        {% card_badge card card.offer_count %}
      </a>
    {% endfor %}
  </div>
{% else %}
  <p class="text-center">No cards found</p>
{% endif %}