@php
    /** @var array{used_percent: float, free_percent: float, free_human: string, total_human: string, used_human: string} $disk */
@endphp
<div class="border-b border-stone-200 bg-white">
    <div class="mx-auto max-w-5xl px-4 py-2 sm:px-6">
        <div class="flex items-center justify-between gap-3 text-xs text-stone-600">
            <span class="font-medium text-stone-700">Disk space</span>
            <span class="tabular-nums">
                {{ $disk['free_human'] }} free
                <span class="text-stone-400">·</span>
                {{ $disk['used_percent'] }}% used of {{ $disk['total_human'] }}
            </span>
        </div>
        <div
            class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-stone-200"
            role="progressbar"
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="{{ (int) round($disk['used_percent']) }}"
            aria-label="Disk space used"
            title="{{ $disk['free_human'] }} free of {{ $disk['total_human'] }}"
        >
            <div
                class="h-full rounded-full transition-[width] duration-300 {{ $barColor }}"
                style="width: {{ min(100, max(0, $disk['used_percent'])) }}%"
            ></div>
        </div>
    </div>
</div>