{% load i18n %}
<div class="flex w-full h-4 rounded-full bg-white overflow-hidden"
    role="group"
    aria-label="{% trans 'Income and Expense Percentages' %}">
    
    <!-- Segment 1: Projected Income -->
    <div class="flex items-center justify-center h-4 bg-success/60 tooltip tooltip-bottom tooltip-success
        {% if percentage.percentages.income_projected > 0 %}rounded-s-full{% endif %}
        {% if percentage.percentages.income_projected > 0 and percentage.percentages.income_current <= 0 and percentage.percentages.expense_projected <= 0 and percentage.percentages.expense_current <= 0 %}rounded-e-full{% endif %}"
        style="width: {{ percentage.percentages.income_projected|floatformat:'2u' }}%"
        data-tippy-content="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)"
        role="progressbar"
        aria-label="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)"
        aria-valuenow="{{ percentage.percentages.income_projected|floatformat:0 }}"
        aria-valuemin="0"
        aria-valuemax="100">
    </div>
    
    <!-- Segment 2: Current Income -->
    <div class="flex items-center justify-center h-4 bg-success tooltip tooltip-bottom tooltip-success
        {% if percentage.percentages.income_projected <= 0 and percentage.percentages.income_current > 0 %}rounded-s-full{% endif %}
        {% if percentage.percentages.income_current > 0 and percentage.percentages.expense_projected <= 0 and percentage.percentages.expense_current <= 0 %}rounded-e-full{% endif %}"
        style="width: {{ percentage.percentages.income_current|floatformat:'2u' }}%"
        data-tippy-content="{% trans 'Current Income' %} ({{ percentage.percentages.income_current|floatformat:2 }}%)"
        role="progressbar"
        aria-label="{% trans 'Current Income' %} ({{ percentage.percentages.income_current|floatformat:2 }}%)"
        aria-valuenow="{{ percentage.percentages.income_current|floatformat:0 }}"
        aria-valuemin="0"
        aria-valuemax="100">
    </div>
    
    <!-- Segment 3: Projected Expenses -->
    <div class="flex items-center justify-center h-4 bg-error/60 tooltip tooltip-bottom tooltip-error
        {% if percentage.percentages.income_projected <= 0 and percentage.percentages.income_current <= 0 and percentage.percentages.expense_projected > 0 %}rounded-s-full{% endif %}
        {% if percentage.percentages.expense_projected > 0 and percentage.percentages.expense_current <= 0 %}rounded-e-full{% endif %}"
        style="width: {{ percentage.percentages.expense_projected|floatformat:'2u' }}%"
        data-tippy-content="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)"
        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">
    </div>
    
    <!-- Segment 4: Current Expenses -->
    <div class="flex items-center justify-center h-4 bg-error tooltip tooltip-bottom tooltip-error
        {% if percentage.percentages.income_projected <= 0 and percentage.percentages.income_current <= 0 and percentage.percentages.expense_projected <= 0 and percentage.percentages.expense_current > 0 %}rounded-s-full{% endif %}
        {% if percentage.percentages.expense_current > 0 %}rounded-e-full{% endif %}"
        style="width: {{ percentage.percentages.expense_current|floatformat:'2u' }}%"
        data-tippy-content="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)"
        role="progressbar"
        aria-label="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)"
        aria-valuenow="{{ percentage.percentages.expense_current|floatformat:0 }}"
        aria-valuemin="0"
        aria-valuemax="100">
    </div>
</div>
{% with p=percentage.percentages %}
{% if p.income_projected > 0 and p.income_current > 0 or p.expense_projected > 0 and p.expense_current > 0 %}
<div class="flex w-full text-xs text-base-content/70" aria-hidden="true">
    <div style="width: {{ p.income_total|floatformat:'2u' }}%">
        {% if p.income_projected > 0 and p.income_current > 0 %}
        <div class="h-1.5 border-x border-b border-base-content/40 rounded-b mx-px"></div>
        <div class="text-center">{{ p.income_total|floatformat:2 }}%</div>
        {% endif %}
    </div>
    <div style="width: {{ p.expense_total|floatformat:'2u' }}%">
        {% if p.expense_projected > 0 and p.expense_current > 0 %}
        <div class="h-1.5 border-x border-b border-base-content/40 rounded-b mx-px"></div>
        <div class="text-center">{{ p.expense_total|floatformat:2 }}%</div>
        {% endif %}
    </div>
</div>
{% endif %}
{% endwith %}