{% load tools %}
{% load i18n %}
{% load currency_display %}
<ul class="nav nav-tabs" id="all-trasactions-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="currency-tab" data-bs-toggle="tab" data-bs-target="#currency-tab-pane"
            type="button" role="tab" aria-controls="currency-tab-pane"
            aria-selected="true">{% trans 'Currencies' %}</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account-tab-pane" type="button"
            role="tab" aria-controls="account-tab-pane" aria-selected="false">{% trans 'Accounts' %}</button>
  </li>
</ul>
<div class="tab-content" id="all-transactions-content">
  <div class="tab-pane fade show active" id="currency-tab-pane" role="tabpanel" aria-labelledby="currency-tab"
       tabindex="0">
    <div class="row row-cols-1 g-4 mt-2">
      {% for currency_id, currency in currency_data.items %}
        <div class="col">
          <c-ui.currency_card :currency="currency" :currency_id="currency_id"
                             :percentages="currency_percentages"></c-ui.currency_card>
        </div>
      {% empty %}
        <div class="col">
        <c-msg.empty
            title="{% translate "No information to display" %}"></c-msg.empty>
      {% endfor %}
      </div>
    </div>
  </div>
  <div class="tab-pane fade" id="account-tab-pane" role="tabpanel" aria-labelledby="account-tab" tabindex="0">
    <div class="row row-cols-1 g-4 mt-2">
      {% for account_id, account in account_data.items %}
        <div class="col">
          <c-ui.account_card :account="account" :account_id="account_id"
                             :percentages="account_percentages"></c-ui.account_card>
        </div>
      {% empty %}
        <div class="col">
        <c-msg.empty
            title="{% translate "No information to display" %}"></c-msg.empty>
      {% endfor %}
      </div>
    </div>
  </div>
</div>
