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

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

<div>
  <div class="tw-hidden lg:tw-grid lg:tw-grid-cols-7 tw-gap-4 lg:tw-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 lg:tw-grid-cols-7 lg:tw-grid-rows-6 tw-gap-4 lg:tw-gap-0">
    {% for date in dates %}
      {% if date %}
      <div class="card h-100 hover:tw-bg-zinc-900 rounded-0{% if not date.transactions %} !tw-hidden lg:!tw-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="lg:tw-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 lg:!tw-block card h-100 rounded-0"></div>
      {% endif %}
    {% endfor %}
  </div>
</div>