finished conversion to tailwind

theme/templates/trades/trade_offer_search.html

@@ -0,0 +1,86 @@
+{% extends 'base.html' %}
+{% load static trade_offer_tags card_badge cache card_multiselect %}
+
+{% block content %}
+  <h1 class="text-center text-4xl font-bold mb-8 pt-4">Trade Offer Search</h1>
+  
+  <!-- Search Form Section -->
+  <section id="trade-search" class="mb-8">
+    <form method="post" action="{% url 'trade_offer_search' %}" class="space-y-4">
+      {% csrf_token %}
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          {% card_multiselect "offered_cards" "Have:" "Select zero or more cards..." available_cards offered_cards %}
+        </div>
+        <div>
+          {% card_multiselect "wanted_cards" "Want:" "Select zero or more cards..." available_cards wanted_cards %}
+        </div>
+      </div>
+      <div class="flex flex-col md:flex-row gap-4">
+        <button type="submit" class="btn btn-primary flex-1">Find a Trade Offer</button>
+      </div>
+    </form>
+  </section>
+  
+  <!-- Search Results Section -->
+  <section id="search-results" class="mb-8">
+    {% include "trades/_search_results.html" %}
+  </section>
+{% endblock content %}
+
+{% block javascript %}
+<script defer>
+document.addEventListener('DOMContentLoaded', function() {
+  const tradeSearchForm = document.querySelector('#trade-search form');
+  if (tradeSearchForm) {
+    tradeSearchForm.addEventListener('submit', function(e) {
+      e.preventDefault();
+      const formData = new FormData(tradeSearchForm);
+      document.querySelector("#search-results").innerHTML = "<div class='text-center text-2xl font-bold'>Searching...</div>";
+      fetch(tradeSearchForm.action, {
+        method: "POST",
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+          "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value
+        },
+        body: formData
+      })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.text();
+      })
+      .then(data => {
+        document.querySelector("#search-results").innerHTML = data;
+      })
+      .catch(error => {
+        alert("There was an error processing your search.");
+        console.error("Error:", error);
+      });
+    });
+    
+    // AJAX pagination click handling
+    document.addEventListener('click', function(e) {
+      const target = e.target.closest('.ajax-page-link');
+      if (target) {
+        e.preventDefault();
+        const page = target.getAttribute('data-page');
+        let pageInput = document.getElementById('page');
+        if (pageInput) {
+          pageInput.value = page;
+        } else {
+          pageInput = document.createElement('input');
+          pageInput.type = 'hidden';
+          pageInput.id = 'page';
+          pageInput.name = 'page';
+          pageInput.value = page;
+          tradeSearchForm.appendChild(pageInput);
+        }
+        tradeSearchForm.dispatchEvent(new Event('submit'));
+      }
+    });
+  }
+});
+</script>
+{% endblock %}