<div>
    @if ($hasTransactions)
    
    <div class="my-6">
        <div class="flex justify-between py-1">
            <span class="text-gray text-sm">
                {{ __('Account usage') }} &nbsp;
                <button
                    wire:click="$dispatch('openAccountUsageInfoModal')"
                    class="ml-1 underline hover:text-theme-accent underline cursor-pointer">
                    {{ __('info') }}
                </button>
            </span>
        </div>
        <svg class="rc-progress-line" preserveAspectRatio="none" viewBox="0 0 100 1">
            <path class="rc-progress-line-trail" d="M 0.5,0.5 L 99.5,0.5" fill-opacity="0" stroke-linecap="round" stroke-width="1" stroke="rgb(var(--color-secondary))"></path>

            <!-- Path for the part up to 80% -->
            <path class="rc-progress-line-path" d="M 0.5,0.5 L {{ min($balancePct, 80) }}.5,0.5" fill-opacity="0" stroke-linecap="round" stroke-width="1" stroke="rgb(var(--color-brand))"
                  style="stroke-dasharray: {{ min($balancePct, 80) }}px, 100px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.5s ease, stroke 0.5s ease; ">
            </path>

            <!-- Path for the part over 80% -->
            @if ($balancePct > 80)
                <path class="rc-progress-line-path" d="M 80.5,0.5 L {{ $balancePct }}.5,0.5" fill-opacity="0" stroke-linecap="round" stroke-width="1" stroke="#ef4444"
                      style="stroke-dasharray: {{ $balancePct - 80 }}px, 100px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.5s ease, stroke 0.5s ease; transition-delay: 0.5s ;
">
                </path>
            @endif
            
        </svg>
      
        <div class="flex justify-between py-1">
            <span class="text-theme-muted text-sm">
                {{__('Balance limit of this account')}}: 
                {{ ' ' . tbFormat($selectedAccount['limitMax'])}}</span>
            @if ($balancePct > 80)
                <span class="text-theme-muted text-sm">{{ tbFormat($selectedAccount['available']) . ' ' . __('available') }}</span>
            @endif
        </div>
    </div>
    @endif

    <!-- Account Usage Info Modal -->
    <livewire:account-usage-info-modal />
</div>