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

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

{% block content %}
<div class="container mx-auto max-w-4xl mt-6" x-data="{ allExpanded: false }">
  <!-- Header-->
  <div class="flex justify-between items-center mb-4">
    <h1 class="text-2xl font-bold">All Trade Offers</h1>
    <div>
      <form method="get" class="flex items-center gap-4" x-data>
        <label class="cursor-pointer flex items-center gap-2">
          <span x-text="allExpanded ? 'Collapse All' : 'Expand All'"></span>
          <input type="checkbox" name="all_expanded" value="true" class="toggle toggle-primary" @click="allExpanded = !allExpanded; $dispatch('toggle-all', { expanded: allExpanded })">
        </label>
        <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>
  </div>
  <!-- Trade Offers -->
  <section class="mb-12">
    <div class="flex justify-end mb-4">
      <a href="{% url 'trade_offer_create' %}" class="btn btn-success">Create New Offer</a>
    </div>
    <div 
      id="all-trade-offers"
      x-data="tradeOffersPagination('{% url 'trade_offer_list' %}?')"
      x-init="init()"
    >
      {% include "trades/_trade_offer_list_paginated.html" with offers=all_trade_offers_paginated %}
    </div>
  </section>
</div>

<script>
  function tradeOffersPagination(baseUrl) {
    return {
      baseUrl: baseUrl,
      loadPage(page) {
        let url = new URL(this.baseUrl, window.location.origin);
        url.searchParams.set("page", page);
        this.$el.innerHTML = '<div class="flex justify-center items-center w-full mt-10"><span class="loading loading-dots loading-xl"></span></div>';
        fetch(url, {
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        })
          .then(response => response.text())
          .then(html => {
            this.$el.innerHTML = html;
            // Reinitialize the click events after injecting the new fragment.
            this.init();
          });
      },
      init() {
        // Bind click events for AJAX pagination links within this component.
        this.$el.querySelectorAll("a.ajax-page-link").forEach(link => {
          link.addEventListener("click", (event) => {
            event.preventDefault();
            const page = link.getAttribute("data-page");
            this.loadPage(page);
          });
        });
      }
    }
  }
</script>
{% endblock content %}