{% 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" action="{% url 'trade_offer_confirm_create' %}" novalidate class="space-y-4">
    {% csrf_token %}
    
    {% 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">
        {% with have_values=form.have_cards.value|default:form.initial.have_cards %}
          {% card_multiselect "have_cards" "I Have:" "Select some cards..." cards have_values %}
        {% endwith %}
      </div>
      <div class="form-control">
        {% with want_values=form.want_cards.value|default:form.initial.want_cards %}
          {% card_multiselect "want_cards" "I Want:" "Select some cards..." cards want_values %}
        {% endwith %}
      </div>
    </div>
    
    <button type="submit" name="preview" class="btn btn-primary w-full">Preview Trade Offer</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>
{% endblock content %}