{% load trade_offer_tags %}
{% comment %}
  This snippet renders a grid of trade offer cards along with pagination controls,
  using the trade_offer templatetag (i.e. {% render_trade_offer offer %}).

  It expects a context variable:
    - offers: an iterable or a paginated page of TradeOffer objects.
{% endcomment %}

<div class="flex flex-row gap-4 flex-wrap justify-center items-start">
  {% for offer in offers %}
    <div class="flex flex-none">
      <a href="{% url 'trade_offer_detail' pk=offer.pk %}" class="no-underline">
        {% render_trade_offer offer %}
      </a>
    </div>
  {% empty %}
    <div>No trade offers available.</div>
  {% endfor %}
</div>

{% if offers.has_other_pages %}
  <nav aria-label="Trade offers pagination" class="mt-6">
    <ul class="flex justify-center space-x-2">
      {% if offers.has_previous %}
        <li>
          <a class="btn btn-outline ajax-page-link" data-page="{{ offers.previous_page_number }}" href="#">
            Previous
          </a>
        </li>
      {% else %}
        <li>
          <span class="btn btn-outline btn-disabled">Previous</span>
        </li>
      {% endif %}

      {% for num in offers.paginator.page_range %}
        <li>
          <a class="btn btn-outline ajax-page-link {% if offers.number == num %}btn-active{% endif %}" data-page="{{ num }}" href="#">
            {{ num }}
          </a>
        </li>
      {% endfor %}

      {% if offers.has_next %}
        <li>
          <a class="btn btn-outline ajax-page-link" data-page="{{ offers.next_page_number }}" href="#">
            Next
          </a>
        </li>
      {% else %}
        <li>
          <span class="btn btn-outline btn-disabled">Next</span>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endif %}