{% load trade_offer_tags %}
{% if offered_cards or wanted_cards %}
  <hr class="my-5">
  <h2 class="mb-4">Results</h2>
  {% if search_results and search_results.object_list %}
      <ul class="list-group">
        {% for offer in search_results %}
        <li class="list-group-item border-0">
          <a href="{% url 'trade_offer_update' offer.pk %}" class="d-flex align-items-center text-decoration-none">
            {% render_trade_offer offer %}
          </a>
        </li>
        {% endfor %}
      </ul>
      <!-- Pagination Controls -->
      <nav aria-label="Search results pagination" class="mt-4">
         <ul class="pagination">
             {% if search_results.has_previous %}
                 <li class="page-item">
                     <a class="page-link ajax-page-link" data-page="{{ search_results.previous_page_number }}" href="#">Previous</a>
                 </li>
             {% else %}
                 <li class="page-item disabled"><span class="page-link">Previous</span></li>
             {% endif %}
             {% for num in search_results.paginator.page_range %}
                 <li class="page-item {% if search_results.number == num %}active{% endif %}">
                     <a class="page-link ajax-page-link" data-page="{{ num }}" href="#">{{ num }}</a>
                 </li>
             {% endfor %}
             {% if search_results.has_next %}
                 <li class="page-item">
                     <a class="page-link ajax-page-link" data-page="{{ search_results.next_page_number }}" href="#">Next</a>
                 </li>
             {% else %}
                 <li class="page-item disabled"><span class="page-link">Next</span></li>
             {% endif %}
         </ul>
      </nav>
  {% else %}
      <div class="alert alert-info">No trade offers found.</div>
  {% endif %}
{% endif %}