{% load i18n %}
<div class="progress-stacked">
  <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.income_projected|floatformat:"2u" }}%">
    <div class="progress-bar progress-bar-striped !tw-bg-green-300"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)">
    </div>
  </div>
  <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Income' %} ({{ percentage.percentages.income_current|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.income_current|floatformat:"2u" }}%">
    <div class="progress-bar !tw-bg-green-400"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title="{% trans 'Current Income' %} ({{ p.percentages.income_current|floatformat:2 }}%)">
    </div>
  </div>
  <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.expense_projected|floatformat:"2u" }}%">
    <div class="progress-bar progress-bar-striped !tw-bg-red-300"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)">
    </div>
  </div>
  <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.expense_current|floatformat:"2u" }}%">
    <div class="progress-bar !tw-bg-red-400"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)">
    </div>
  </div>
</div>
