{% load natural %}
{% load i18n %}

<div>
  <div class="hidden lg:grid lg:grid-cols-7 gap-4 lg:gap-0 bg-base-200">
    <div class="border-l border-t border-b border-base-300 p-2 text-center">
      {% translate 'MON' %}
    </div>
    <div class="border-t border-b border-base-300 p-2 text-center">
      {% translate 'TUE' %}
    </div>
    <div class="border-t border-b border-base-300 p-2 text-center">
      {% translate 'WED' %}
    </div>
    <div class="border-t border-b border-base-300 p-2 text-center">
      {% translate 'THU' %}
    </div>
    <div class="border-t border-b border-base-300 p-2 text-center">
      {% translate 'FRI' %}
    </div>
    <div class="border-t border-b border-base-300 p-2 text-center">
      {% translate 'SAT' %}
    </div>
    <div class="border-r border-t border-b border-base-300 p-2 text-center">
      {% translate 'SUN' %}
    </div>
  </div>
  <div class="grid grid-cols-1 grid-rows-1 lg:grid-cols-7 lg:grid-rows-6 gap-4 lg:gap-0">
    {% for date in dates %}
      {% if date %}
      <div class="card bg-base-100 h-full hover:bg-base-200! border border-base-content/30  rounded-none {% if not date.transactions %}hidden! lg:flex!{% endif %}{% if today == date.date %} border-2 border-primary{% endif %} cursor-pointer" role="button"
        hx-get="{% url 'calendar_transactions_list' day=date.date.day month=date.date.month year=date.date.year %}"
        hx-target="#persistent-generic-offcanvas-left">
        <div class="card-header border-0 bg-transparent text-end flex justify-between p-2 w-full">
          <div class="lg:hidden text-start w-full">{{ date.date|date:"l"|lower }}</div>
          <div class="text-end w-full">{{ date.day }}</div>
        </div>
        <div class="card-body p-2 flex flex-row flex-wrap gap-1">
          {% for transaction in date.transactions %}
            {% if transaction.is_paid %}
              {% if transaction.type == "IN" and not transaction.account.is_asset %}
                <i class="fa-solid fa-circle-check text-success" data-tippy-content="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
              {% elif transaction.type == "IN" and transaction.account.is_asset %}
                <i class="fa-solid fa-circle-check text-success/80" data-tippy-content="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
              {% elif transaction.type == "EX" and not transaction.account.is_asset %}
                <i class="fa-solid fa-circle-check text-error" data-tippy-content="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
              {% elif transaction.type == "EX" and transaction.account.is_asset %}
                <i class="fa-solid fa-circle-check text-error/80" data-tippy-content="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
              {% endif %}
            {% else %}
              {% if transaction.type == "IN" and not transaction.account.is_asset %}
                <i class="fa-regular fa-circle text-success" data-tippy-content="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
              {% elif transaction.type == "IN" and transaction.account.is_asset %}
                <i class="fa-regular fa-circle text-success/80" data-tippy-content="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
              {% elif transaction.type == "EX" and not transaction.account.is_asset %}
                <i class="fa-regular fa-circle text-error" data-tippy-content="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
              {% elif transaction.type == "EX" and transaction.account.is_asset %}
                <i class="fa-regular fa-circle text-error/80" data-tippy-content="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
              {% endif %}
            {% endif %}
          {% endfor %}
        </div>
      </div>
      {% else %}
        <div class="hidden! lg:block! card bg-base-300 h-full rounded-none"></div>
      {% endif %}
    {% endfor %}
  </div>
</div>