stat_card

{% load currency_filters %}
{# One statistic card.
   Required : label, value, npl, percent, gradient, icon
   Optional : col_class, url, body_class, label_class, value_prefix,
              info_class, info_width, icon_size, rate, rate_title
#}
<div class="{% firstof col_class 'col-xl-2 col-md-6' %}">
    {% if url %}<a href="{{ url }}" class="text-decoration-none d-block">{% endif %}
    <div class="card stat-card h-100 shadow-sm">
        <div class="{% firstof body_class 'card-body-1' %} {{ gradient }} position-relative">

            <div class="{% firstof label_class 'stat-label' %} fw-bold text-uppercase">{{ label }}</div>

            <div class="stat-value mt-2 fw-bold">
                {{ value_prefix }}{{ value|format_currency }}
                {% if rate %}
                <span class="value-percentage fw-bold"
                      style="font-size: 0.6em; color: #f8d7a1; margin-left: 5px;"
                      data-bs-toggle="tooltip" data-bs-placement="top" title="{{ rate_title }}">
                    {{ rate|floatformat:1 }}%
                </span>
                {% endif %}
            </div>

            <div class="{% firstof info_class 'overdue-info-1' %} mt-3 d-flex align-items-center flex-wrap"
                 style="max-width: {% firstof info_width '92%' %};">
                <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                <span class="fw-medium">NPL: </span>
                <span class="fw-bold text-danger ms-1" style="font-size: 1.3em;">
                    {{ npl|format_currency }}&#10148;{{ percent|floatformat:1 }}%
                </span>
            </div>

            <div class="card-icon position-absolute end-0 top-0 p-3 opacity-90">
                <i class="fas {{ icon }} {% firstof icon_size 'fa' %} text-warning"></i>
            </div>

        </div>
    </div>
    {% if url %}</a>{% endif %}
</div>