{% extends 'base.html' %}
{% load static pagination_tags %}

{% block title %}Trade Offers{% endblock title %}

{% block content %}
<div x-data="{
    page: {{ page_obj.number|default:1 }},
    loadOffers() {
      let url = new URL('{% url 'trade_offer_list' %}', window.location.origin);
      let params = new URLSearchParams(window.location.search);
      params.set('page', this.page);
      url.search = params.toString();
      fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
        .then(response => response.text())
        .then(html => { 
            this.$refs.offersContainer.innerHTML = html;
            window.processMarqueeElements && window.processMarqueeElements();
        });
    }
  }"
  x-on:change-page.window="page = $event.detail.page; loadOffers()">
  
  <!-- Header without Expand All -->
  <div class="flex justify-between items-center mb-4">
    <h1 class="text-2xl font-bold">Trade Offers</h1>
    <div class="flex items-center gap-4">
      <form method="get" class="flex items-center gap-4" x-data>
        <label class="cursor-pointer flex items-center gap-2">
          <span>Only Closed</span>
          <input type="checkbox" name="show_closed" value="true" class="toggle toggle-primary"
                @change="$el.form.submit()" {% if show_closed %}checked{% endif %}>
        </label>
        <button type="submit" class="btn btn-primary" x-show="false">Apply</button>
      </form>
      <div>
        <a href="{% url 'trade_offer_create' %}" class="btn btn-success">Create New Offer</a>
      </div>
    </div>
  </div>
  <!-- Trade Offers -->
  <section class="mb-12">
    
    <div id="all-trade-offers" x-ref="offersContainer">
      {% include "trades/_trade_offer_list.html" with offers=offers page_obj=page_obj %}
    </div>
  </section>
</div>
{% endblock content %}