{% extends '_base.html' %}
{% load static %}
{% load el_pagination_tags %}

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

{% block content %}
<div class="d-flex justify-content-end mb-3">
  <form method="get" class="d-flex align-items-center">
    <div class="form-check me-3">
      <input class="form-check-input" type="checkbox" name="show_completed" id="show_completed" value="true" {% if show_completed %}checked{% endif %}>
      <label class="form-check-label" for="show_completed">
        Only Completed
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Apply</button>
  </form>
</div>

<h2>Trade Offers</h2>
<table class="table">
  <thead>
    <tr>
      <th>Offer</th>
      <th>State</th>
      <th>Updated At</th>
    </tr>
  </thead>
  <tbody>
    {% paginate 10 object_list as paginated_offers %}
    {% for offer in paginated_offers %}
    <tr>
      <td>
        <a href="{% url 'trade_offer_update' offer.id %}" class="d-flex align-items-center text-decoration-none">
          <div class="flex-grow-1 text-start">
            FT: {% for card in offer.cards_ft.all %}
                {{ card.name }}{% if not forloop.last %}, {% endif %}
            {% endfor %}
          </div>
          <div class="px-2 text-center" style="min-width: 50px;">&#x27F6;</div>
          <div class="flex-grow-1 text-end">
            LF: {% for card in offer.cards_lf.all %}
                {{ card.name }}{% if not forloop.last %}, {% endif %}
            {% endfor %}
          </div>
        </a>
      </td>
      <td>{{ offer.get_state_display }}</td>
      <td>{{ offer.updated_at }}</td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="3">No trade offers available.</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
<div class="pagination">
    {% show_pages %}
</div>
<a href="{% url 'trade_offer_create' %}" class="btn btn-success">Create New Offer</a>
{% endblock content %}