{% load currency_display %}
{% load i18n %}
<div class="card-body show-loading" hx-get="{% url 'exchange_rates_list_pair' %}" hx-trigger="updated from:window" hx-swap="outerHTML" hx-vals='{"page": "{{ page_obj.number }}", "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'>
  {% if page_obj %}
  <div class="overflow-x-auto">
    <table class="table table-hover whitespace-nowrap">
      <thead>
        <tr>
          <th scope="col" class="table-col-auto"></th>
          <th scope="col">{% translate 'Date' %}</th>
          <th scope="col">{% translate 'Pairing' %}</th>
          <th scope="col">{% translate 'Rate' %}</th>
        </tr>
      </thead>
      <tbody>
        {% for exchange_rate in page_obj %}
        <tr class="exchange-rate">
          <td class="table-col-auto">
            <div class="join" role="group" aria-label="{% translate 'Actions' %}">
              <a class="btn btn-secondary btn-sm join-item"
                    role="button"
                    data-tippy-content="{% translate "Edit" %}"
                    hx-get="{% url 'exchange_rate_edit' pk=exchange_rate.id %}"
                    hx-target="#generic-offcanvas"
                    hx-swap="innerHTML">
                <i class="fa-solid fa-pencil fa-fw"></i></a>
              <a class="btn btn-error btn-sm join-item"
                      role="button"
                      data-tippy-content="{% translate "Delete" %}"
                      hx-delete="{% url 'exchange_rate_delete' pk=exchange_rate.id %}"
                      hx-trigger='confirmed'
                      hx-swap="innerHTML"
                      data-bypass-on-ctrl="true"
                      data-title="{% translate "Are you sure?" %}"
                      data-text="{% translate "You won't be able to revert this!" %}"
                      data-confirm-text="{% translate "Yes, delete it!" %}"
                      _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a>
            </div>
          </td>
          <td>{{ exchange_rate.date|date:"SHORT_DATETIME_FORMAT" }}</td>
          <td><span class="badge badge-secondary rounded-full">{{ exchange_rate.from_currency.name }}</span> x <span class="badge badge-secondary rounded-full">{{ exchange_rate.to_currency.name }}</span></td>
          <td>1 {{ exchange_rate.from_currency.name }} ≅ {% currency_display amount=exchange_rate.rate prefix=exchange_rate.to_currency.prefix suffix=exchange_rate.to_currency.suffix decimal_places=exchange_rate.to_currency.decimal_places string=True %}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
    <c-msg.empty title="{% translate "No exchange rates" %}" remove-padding></c-msg.empty>
  {% endif %}

  {% if page_obj.has_other_pages %}
  <div class="mt-auto">
    <input value="{{ page_obj.number }}" name="page" type="hidden" id="page">

    <nav aria-label="{% translate 'Page navigation' %}">
    <div class="join flex justify-center mt-5">
      <button class="join-item btn btn-sm {% if not page_obj.has_previous %}btn-disabled{% endif %}"
           hx-get="{% if page_obj.has_previous %}{% url 'exchange_rates_list_pair' %}{% endif %}"
           hx-vals='{"page": 1, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
           hx-include="#filter, #order"
           hx-target="#exchange-rates-table"
           aria-label="Primeira página"
           hx-swap="show:top">
          <span aria-hidden="true">&laquo;</span>
        </button>
      {% for page_number in page_obj.paginator.page_range %}
              {% comment %}
                  This conditional allows us to display up to 3 pages before and after the current page
                  If you decide to remove this conditional, all the pages will be displayed

                  You can change the 3 to any number you want e.g
                  To display only 5 pagination items, change the 3 to 2 (2 before and 2 after the current page)
              {% endcomment %}
              {% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
                  {% if page_obj.number == page_number %}
                      <button class="join-item btn btn-sm btn-active">
                          {{ page_number }}
                      </button>
                  {% else %}
                      <button class="join-item btn btn-sm"
                             hx-get="{% url 'exchange_rates_list_pair' %}"
                             hx-vals='{"page": {{ page_number }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
                             hx-target="#exchange-rates-table"
                             hx-swap="show:top">
                          {{ page_number }}
                      </button>
                  {% endif %}
              {% endif %}
      {% endfor %}
      {% if page_obj.number|add:3 < page_obj.paginator.num_pages %}
        <button class="join-item btn btn-sm btn-disabled"
             aria-label="...">
            <span aria-hidden="true">...</span>
          </button>
        <button class="join-item btn btn-sm"
             hx-get="{% url 'exchange_rates_list_pair' %}" hx-target="#exchange-rates-table"
             hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
             hx-include="#filter, #order"
             hx-swap="show:top"
             aria-label="Última página">
            <span aria-hidden="true">{{ page_obj.paginator.num_pages }}</span>
          </button>
      {% endif %}
      <button class="join-item btn btn-sm {% if not page_obj.has_next %}btn-disabled{% endif %}"
           hx-get="{% if page_obj.has_next %}{% url 'exchange_rates_list_pair' %}{% endif %}"
           hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
           hx-include="#filter, #order"
           hx-swap="show:top"
           hx-target="#exchange-rates-table"
           aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </button>
    </div>
  </nav>
  </div>
  {% endif %}
</div>
