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

{% block title %}Trade Offer & Acceptance List{% endblock title %}

{% block content %}
<div class="container mx-auto max-w-4xl mt-6">
  <!-- Filter Form: Friend Code Selector + Toggle for Completed view -->
  <div class="flex justify-end mb-4">
    <form method="get" class="flex items-center space-x-4">
      {% include "trades/_friend_code_select.html" with friend_codes=friend_codes selected_friend_code=selected_friend_code field_name="friend_code" label="Filter by Friend Code" %}
      
      <label class="cursor-pointer flex items-center space-x-2">
        <span class="font-medium">Only Completed</span>
        <input type="checkbox" name="show_completed" value="true" class="toggle toggle-primary" {% if show_completed %}checked{% endif %}>
      </label>
      <button type="submit" class="btn btn-primary">Apply</button>
    </form>
  </div>

  <!-- Section 1: My Trade Offers -->
  <section class="mb-12">
    <h2 class="text-2xl font-bold mb-4">My Trade Offers</h2>
    {% if my_trade_offers_paginated.object_list %}
      {% include "trades/_trade_offer_list.html" with offers=my_trade_offers_paginated %}
      <div class="flex justify-between items-center mt-4">
        {% if my_trade_offers_paginated.has_previous %}
          <a href="?{% for key, value in request.GET.items %}{% if key != 'offers_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}offers_page={{ my_trade_offers_paginated.previous_page_number }}" class="btn btn-sm">Previous</a>
        {% else %}
          <span></span>
        {% endif %}
        <span>Page {{ my_trade_offers_paginated.number }} of {{ my_trade_offers_paginated.paginator.num_pages }}</span>
        {% if my_trade_offers_paginated.has_next %}
          <a href="?{% for key, value in request.GET.items %}{% if key != 'offers_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}offers_page={{ my_trade_offers_paginated.next_page_number }}" class="btn btn-sm">Next</a>
        {% else %}
          <span></span>
        {% endif %}
      </div>
    {% else %}
      <p>No trade offers found.</p>
    {% endif %}
  </section>

  <!-- Section 2: Trade Acceptances Waiting For Your Response -->
  <section class="mb-12">
    <h2 class="text-2xl font-bold mb-4">Trade Acceptances Waiting For Your Response</h2>
    {% if trade_acceptances_waiting_paginated.object_list %}
      {% include "trades/_trade_offer_list.html" with offers=trade_acceptances_waiting_paginated %}
      <div class="flex justify-between items-center mt-4">
        {% if trade_acceptances_waiting_paginated.has_previous %}
          <a href="?{% for key, value in request.GET.items %}{% if key != 'waiting_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}waiting_page={{ trade_acceptances_waiting_paginated.previous_page_number }}" class="btn btn-sm">Previous</a>
        {% else %}
          <span></span>
        {% endif %}
        <span>Page {{ trade_acceptances_waiting_paginated.number }} of {{ trade_acceptances_waiting_paginated.paginator.num_pages }}</span>
        {% if trade_acceptances_waiting_paginated.has_next %}
          <a href="?{% for key, value in request.GET.items %}{% if key != 'waiting_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}waiting_page={{ trade_acceptances_waiting_paginated.next_page_number }}" class="btn btn-sm">Next</a>
        {% else %}
          <span></span>
        {% endif %}
      </div>
    {% else %}
      <p>No pending acceptances at this time.</p>
    {% endif %}
  </section>

  <!-- Section 3: Other Trade Acceptances -->
  <section>
    <h2 class="text-2xl font-bold mb-4">Other Trade Acceptances</h2>
    {% if other_trade_acceptances_paginated.object_list %}
      {% include "trades/_trade_offer_list.html" with offers=other_trade_acceptances_paginated %}
      <div class="flex justify-between items-center mt-4">
        {% if other_trade_acceptances_paginated.has_previous %}
          <a href="?{% for key, value in request.GET.items %}{% if key != 'other_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}other_page={{ other_trade_acceptances_paginated.previous_page_number }}" class="btn btn-sm">Previous</a>
        {% else %}
          <span></span>
        {% endif %}
        <span>Page {{ other_trade_acceptances_paginated.number }} of {{ other_trade_acceptances_paginated.paginator.num_pages }}</span>
        {% if other_trade_acceptances_paginated.has_next %}
          <a href="?{% for key, value in request.GET.items %}{% if key != 'other_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}other_page={{ other_trade_acceptances_paginated.next_page_number }}" class="btn btn-sm">Next</a>
        {% else %}
          <span></span>
        {% endif %}
      </div>
    {% else %}
      <p>No other acceptances found.</p>
    {% endif %}
  </section>

  <div class="mt-6">
    <a href="{% url 'trade_offer_create' %}" class="btn btn-success">Create New Offer</a>
  </div>
</div>
{% endblock content %}