{% 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.
{% endcomment %}
{% if cards %}
  <div class="flex flex-col items-center gap-3">
    {% for card in cards %}
      {% if show_zero|default:False or card.offer_count > 0 %}
        {% if mode == "offered" %}
        <a href="?offered_cards={{ card.id }}"
        {% else %}
        <a href="?wanted_cards={{ card.id }}"
        {% endif %}
          class="flex justify-between items-center text-primary no-underline">
          {% card_badge card card.offer_count %}
        </a>
      {% endif %}
    {% endfor %}
  </div>
{% else %}
  <p class="text-center">No cards found</p>
{% endif %}