progress on conversion to tailwind

theme/templates/trades/trade_offer_create.html

@@ -0,0 +1,77 @@
+{% extends 'base.html' %}
+{% load card_multiselect %}
+
+{% block title %}Create Trade Offer{% endblock title %}
+
+{% block content %}
+<div class="container mx-auto max-w-xl mt-6">
+  <h2 class="text-2xl font-bold mb-4">Create a Trade Offer</h2>
+  <form method="post" novalidate class="space-y-4">
+    {% csrf_token %}
+    
+    {# Use the DRY friend code selector fragment #}
+    {% include "trades/_friend_code_select.html" with friend_codes=friend_codes selected_friend_code=selected_friend_code field_name=form.initiated_by.html_name label="Initiated by" %}
+    
+    <!-- Grid layout for Card Selectors: "Have" and "Want" -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="form-control">
+        {% card_multiselect "have_cards" "Have:" "Select one or more cards..." available_cards form.initial.have_cards %}
+      </div>
+      <div class="form-control">
+        {% card_multiselect "want_cards" "Want:" "Select one or more cards..." available_cards form.initial.want_cards %}
+      </div>
+    </div>
+    
+    <button type="submit" class="btn btn-primary w-full">Submit</button>
+  </form>
+  {% if form.errors %}
+    <div class="alert alert-error mt-4">
+      <strong>Please correct the errors below:</strong>
+      <ul class="mt-2">
+          {% for field in form %}
+            {% for error in field.errors %}
+              <li>{{ error }}</li>
+            {% endfor %}
+          {% endfor %}
+          {% for error in form.non_field_errors %}
+            <li>{{ error }}</li>
+          {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
+</div>
+<script defer>
+document.addEventListener('DOMContentLoaded', () => {
+  const initiatedBySelect = document.getElementById('{{ form.initiated_by.html_name }}');
+  if (initiatedBySelect) {
+    const choicesInstance = new Choices(initiatedBySelect, {
+      searchEnabled: false,
+      classNames: {
+        containerOuter: 'choices',
+        containerInner: 'choices__inner',
+        input: 'choices__input',
+      },
+      callbackOnCreateTemplates: function(template) {
+        return {
+          choice: (classNames, data) => {
+            return template(`
+              <div class="${classNames.item} ${classNames.itemChoice} bg-accent text-white" 
+                   data-select-text="${this.config.itemSelectText}" 
+                   data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} 
+                   data-id="${data.id}" data-value="${data.value}" 
+                   ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
+                ${data.label}
+              </div>
+            `);
+          },
+        };
+      },
+    });
+
+    // Style the Choices control as needed
+    choicesInstance.containerOuter.element.classList.add('bg-secondary', 'select', 'select-bordered', 'w-full');
+    choicesInstance.containerInner.element.classList.add('bg-secondary', 'text-white');
+  }
+});
+</script>
+{% endblock content %}