WYGIWYH/app/templates/exchange_rates/fragments/list.html

{% load currency_display %}
{% load i18n %}
<div class="tw:container tw:px-md-3 tw:py-3 tw:column-gap-5">
  <div class="tw:text-3xl tw:font-bold tw:font-mono tw:w-full tw:mb-3">
    {% spaceless %}
      <div>{% translate 'Exchange Rates' %}<span>
      <a class="tw:no-underline tw:text-2xl tw:p-1 category-action"
         role="button"
         data-bs-toggle="tooltip"
         data-bs-title="{% translate "Add" %}"
         hx-get="{% url 'exchange_rate_add' %}"
         hx-target="#generic-offcanvas">
            <i class="fa-solid fa-circle-plus fa-fw"></i></a>
    </span></div>
    {% endspaceless %}
  </div>

  <div class="tw:card tw:bg-base-100 tw:shadow-xl">
    <div class="tw:card-header tw:bg-base-200 tw:p-4">
      <div role="tablist" class="tw:tabs tw:tabs-lifted">
        <button class="tw:tab tw:tab-active" hx-indicator="#exchange-rates-table" data-bs-toggle="tab" type="button"
                role="tab" aria-controls="home-tab-pane" aria-selected="true"
                hx-get="{% url 'exchange_rates_list_pair' %}" hx-trigger="load, click"
                hx-target="#exchange-rates-table" aria-controls="#exchange-rates-table">{% translate 'All' %}</button>
        {% for pair in pairings %}
          <button class="tw:tab" hx-indicator="#exchange-rates-table"
                  hx-get="{% url 'exchange_rates_list_pair' %}"
                  hx-vals='{"from": "{{ pair.1 }}", "to": "{{ pair.2 }}"}'
                  hx-target="#exchange-rates-table" data-bs-toggle="tab" type="button" role="tab"
                  aria-controls="#exchange-rates-table" aria-selected="false">{{ pair.0 }}</button>
        {% endfor %}
      </div>
    </div>

    <div class="tw:card">
      <div id="exchange-rates-table" class="show-loading"></div>
    </div>

  </div>
</div>