WYGIWYH/app/templates/insights/fragments/emergency_fund.html

{% load i18n %}


<div hx-get="{% url 'insights_emergency_fund' %}" hx-trigger="updated from:window" class="show-loading"
     hx-swap="outerHTML">
  <div class="join join-vertical w-full" id="emergency-fund-accordion">
    {% for id, data in data.items %}
      {% if data.average %}
        <div class="collapse collapse-arrow join-item border-base-300 border">
          <input type="radio" name="emergency-fund-accordion" />
          <div class="collapse-title text-base font-medium">
            <span>
              <span class="text-base-content/60">{% trans "You've spent an average of" %}</span>
              <c-amount.display
                  :amount="data.average"
                  :prefix="data.currency.prefix"
                  :suffix="data.currency.suffix"
                  :decimal_places="data.currency.decimal_places"
                  custom_class="text-3xl"
                  divless></c-amount.display>
              <span class="text-base-content/60">{% trans 'on the last 12 months, at this rate you could go by' %}</span>
              <span class="text-3xl">{{ data.months }}</span>
              <span class="text-base-content/60">{% trans 'months without any income.' %}</span>
            </span>
          </div>
          <div class="collapse-content">
            <div class="flex justify-between items-baseline mt-2">
              <div class="text-end font-mono">
                <div class="text-base-content/60">{% translate 'average expenses' %}</div>
              </div>
              <div class="dotted-line flex-grow"></div>
              <div class="text-end font-mono">
                <c-amount.display
                    :amount="data.average"
                    :prefix="data.currency.prefix"
                    :suffix="data.currency.suffix"
                    :decimal_places="data.currency.decimal_places"
                    color="red"></c-amount.display>
              </div>
            </div>
            <div class="flex justify-between items-baseline mt-2">
              <div class="text-end font-mono">
                <div class="text-base-content/60">{% translate 'liquid total' %}</div>
              </div>
              <div class="dotted-line flex-grow"></div>
              <div class="text-end font-mono">
                <c-amount.display
                    :amount="data.total_current"
                    :prefix="data.currency.prefix"
                    :suffix="data.currency.suffix"
                    :decimal_places="data.currency.decimal_places"
                    color="{% if data.total_current > 0 %}green{% elif data.total_current < 0 %}red{% endif %}"></c-amount.display>
              </div>
            </div>
            <div class="flex justify-between items-baseline mt-2">
              <div class="text-end font-mono">
                <div class="text-base-content/60">{% translate 'months left' %}</div>
              </div>
              <div class="dotted-line flex-grow"></div>
              <div class="text-end font-mono">
                <span>{{ data.months }}</span>
              </div>
            </div>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>