progress on conversion to tailwind

theme/templates/trades/_trade_offer_list.html

@@ -0,0 +1,58 @@
+{% 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 %}