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

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

<div>
  <div class="tw:hidden tw:lg:grid tw:lg:grid-cols-7 tw:gap-4 tw:lg:gap-0">
    <div class="border-start border-top border-bottom p-2 text-center">
      {% translate 'MON' %}
    </div>
    <div class="border-top border-bottom p-2 text-center">
      {% translate 'TUE' %}
    </div>
    <div class="border-top border-bottom p-2 text-center">
      {% translate 'WED' %}
    </div>
    <div class="border-top border-bottom p-2 text-center">
      {% translate 'THU' %}
    </div>
    <div class="border-top border-bottom p-2 text-center">
      {% translate 'FRI' %}
    </div>
    <div class="border-top border-bottom p-2 text-center">
      {% translate 'SAT' %}
    </div>
    <div class="border-end border-top border-bottom p-2 text-center">
      {% translate 'SUN' %}
    </div>
  </div>
  <div class="tw:grid tw:grid-cols-1 tw:grid-rows-1 tw:lg:grid-cols-7 tw:lg:grid-rows-6 tw:gap-4 tw:lg:gap-0">
    {% for date in dates %}
      {% if date %}
      <div class="card h-100 tw:hover:bg-zinc-900! rounded-0{% if not date.transactions %} tw:hidden! tw:lg:flex!{% endif %}{% if today == date.date %} tw:border-yellow-300 border-primary{% endif %} " 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 tw:flex justify-content-between p-2 w-100">
          <div class="tw:lg:hidden text-start w-100">{{ date.date|date:"l"|lower }}</div>
          <div class="text-end w-100">{{ date.day }}</div>
        </div>
        <div class="card-body p-2">
          {% 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 tw:text-green-400" data-bs-toggle="tooltip" data-bs-title="{% 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 tw:text-green-300" data-bs-toggle="tooltip" data-bs-title="{% 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 tw:text-red-400" data-bs-toggle="tooltip" data-bs-title="{% 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 tw:text-red-300" data-bs-toggle="tooltip" data-bs-title="{% 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 tw:text-green-400" data-bs-toggle="tooltip" data-bs-title="{% 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 tw:text-green-300" data-bs-toggle="tooltip" data-bs-title="{% 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 tw:text-red-400" data-bs-toggle="tooltip" data-bs-title="{% 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 tw:text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
              {% endif %}
            {% endif %}
          {% endfor %}
        </div>
      </div>
      {% else %}
        <div class="tw:hidden! tw:lg:block! card h-100 rounded-0"></div>
      {% endif %}
    {% endfor %}
  </div>
</div>