{% load trade_offer_tags %}
{% if trade_offers %}
  <div class="flex flex-col">
    {% for offer in trade_offers %}
      <div class="mb-4">
         {% render_trade_offer offer %}
      </div>
    {% endfor %}
  </div>
  {% if is_paginated %}
  <div class="flex justify-between items-center mt-4">
    {% if page_obj.has_previous %}
      <button type="button" class="btn btn-sm" 
              @click="$dispatch('change-page-{{ side }}', { page: {{ page_obj.previous_page_number }} })">
        Previous
      </button>
    {% else %}
      <span></span>
    {% endif %}
    {% if paginator.num_pages > 1 %}
      <span class="text-sm">Page {{ page_obj.number }} of {{ paginator.num_pages }}</span>
    {% endif %}
    {% if page_obj.has_next %}
      <button type="button" class="btn btn-sm" 
              @click="$dispatch('change-page-{{ side }}', { page: {{ page_obj.next_page_number }} })">
        Next
      </button>
    {% else %}
      <span></span>
    {% endif %}
  </div>
  {% endif %}
{% else %}
  <p class="text-gray-500">No trade offers found.</p>
{% endif %}