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

{% load currency_display %}
{% load i18n %}
<div class="container px-md-3 py-3 column-gap-5">
  <div class="text-3xl font-bold font-mono w-full mb-3">
    {% spaceless %}
      <div>{% translate 'Exchange Rates' %}<span>
      <a class="no-underline text-2xl p-1 category-action"
         role="button"
         data-tippy-content="{% 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="card bg-base-100 shadow-xl">
    <div class="card-header bg-base-200 p-4">
      <div role="tablist" class="tabs tabs-lifted">
        <button class="tab 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="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="card">
      <div id="exchange-rates-table" class="show-loading"></div>
    </div>

  </div>
</div>