{% 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 our DRY friend code selector #}
    {% 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" %}
    
    <!-- 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>
            `);
          },
        };
      },
    });
    choicesInstance.containerOuter.element.classList.add('bg-secondary', 'select', 'select-bordered', 'w-full');
    choicesInstance.containerInner.element.classList.add('bg-secondary', 'text-white');
  }
});
</script>
{% endblock content %}