{% load trade_offer_tags pagination_tags %}
{% comment %}
  This snippet renders a grid of trade offer cards (or acceptance cards) along with pagination controls.
  For a TradeOffer, we use {% render_trade_offer %}; for a TradeAcceptance, {% render_trade_acceptance %}.
{% endcomment %}

<div class="flex flex-row gap-4 flex-wrap justify-center items-start">
  {% for offer in offers %}
    <div class="flex flex-none">
      {% if offer.accepted_by %}
        {# Render a trade acceptance using our new tag #}
        {% render_trade_acceptance offer %}
      {% else %}
        {% render_trade_offer offer expanded=expanded %}
      {% endif %}
    </div>
  {% empty %}
    <div>No trade offers available.</div>
  {% endfor %}
</div>
{% render_pagination page_obj %}