{% load natural %}
{% load i18n %}
{% regroup transactions by date|customnaturaldate as transactions_by_date %}

<div id="transactions-list">
  {% if late_transactions %}
  <div id="late-transactions" class="transactions-divider"
       x-data="{ open: sessionStorage.getItem('late-transactions') !== 'false' }"
       x-init="if (sessionStorage.getItem('late-transactions') === null) sessionStorage.setItem('late-transactions', 'true')">
      <div class="mt-3 mb-1 w-full border-b border-b-error/50 transactions-divider-title cursor-pointer">
        <a class="no-underline inline-block w-full text-error font-semibold"
           role="button"
           @click="open = !open; sessionStorage.setItem('late-transactions', open)"
           :aria-expanded="open">
        <i class="fa-solid fa-circle-exclamation me-1"></i>{% translate "late" %}
        </a>
      </div>
      <div class="transactions-divider-collapse overflow-visible isolation-auto"
           x-show="open"
           x-collapse>
        <div class="flex flex-col">
        {% for transaction in late_transactions %}
          <c-transaction.item
            :transaction="transaction"></c-transaction.item>
        {% endfor %}
        </div>
      </div>
    </div>
  {% endif %}

  {% for x in transactions_by_date %}
    <div id="{{ x.grouper|slugify }}" class="transactions-divider"
         x-data="{ open: sessionStorage.getItem('{{ x.grouper|slugify }}') !== 'false' }"
         x-init="if (sessionStorage.getItem('{{ x.grouper|slugify }}') === null) sessionStorage.setItem('{{ x.grouper|slugify }}', 'true')">
      <div class="mt-3 mb-1 w-full border-b border-b-base-content/30 transactions-divider-title cursor-pointer">
        <a class="no-underline inline-block w-full"
           role="button"
           @click="open = !open; sessionStorage.setItem('{{ x.grouper|slugify }}', open)"
           :aria-expanded="open">
        {{ x.grouper }}
        </a>
      </div>
      <div class="transactions-divider-collapse overflow-visible isolation-auto"
           x-show="open"
           x-collapse>
        <div class="flex flex-col">
        {% for transaction in x.list %}
          <c-transaction.item
            :transaction="transaction"></c-transaction.item>
        {% endfor %}
        </div>
      </div>
    </div>

  {% empty %}
    {% if not late_transactions %}
    <c-msg.empty
      title="{% translate 'No transactions this month' %}"
      subtitle="{% translate "Try adding one" %}"></c-msg.empty>
    {% endif %}
  {% endfor %}
{# Floating bar #}
  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
</div>