mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-04-25 10:08:36 +02:00
69 lines
3.0 KiB
HTML
69 lines
3.0 KiB
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 %}
|
|
<c-ui.components.collapse>
|
|
<c-slot name="title">
|
|
<span>
|
|
<span class="text-subtle">{% 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-subtle">{% trans 'on the last 12 months, at this rate you could go by' %}</span>
|
|
<span class="text-3xl">{{ data.months }}</span>
|
|
<span class="text-subtle">{% trans 'months without any income.' %}</span>
|
|
</span>
|
|
</c-slot>
|
|
<c-slot name="content">
|
|
<div class="flex justify-between items-baseline mt-2">
|
|
<div class="text-end font-mono">
|
|
<div class="text-subtle">{% 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-subtle">{% 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-subtle">{% translate 'months left' %}</div>
|
|
</div>
|
|
<div class="dotted-line flex-grow"></div>
|
|
<div class="text-end font-mono">
|
|
<span>{{ data.months }}</span>
|
|
</div>
|
|
</div>
|
|
</c-slot>
|
|
</c-ui.components.collapse>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|