@php
    $files = array_values(array_filter($data['files'] ?? [], fn ($f) => filled($f['file'] ?? null)));
    $button = filled($data['button_text'] ?? null) ? $data['button_text'] : 'Download';
@endphp
<section class="{{ $cls }}" {{ $attrs }}>
    <div class="container-page">
        @include('builder.partials.head')

        <ul @class(['pb-downloads mx-auto max-w-4xl', 'mt-10' => filled($data['title'] ?? null)])>
            @forelse($files as $file)
                @php
                    $name = ($file['file_name'] ?? '') ?: basename(parse_url($file['file'], PHP_URL_PATH) ?: $file['file']);
                    $ext = strtoupper(pathinfo($name, PATHINFO_EXTENSION) ?: 'FILE');
                    $size = $file['file_size'] ?? '';
                    if (is_numeric($size)) {
                        $units = ['B', 'KB', 'MB', 'GB'];
                        $size = (float) $size;
                        $u = 0;
                        while ($size >= 1024 && $u < 3) {
                            $size /= 1024;
                            $u++;
                        }
                        $size = round($size, $u > 1 ? 1 : 0).' '.$units[$u];
                    }
                @endphp
                <li class="pb-download">
                    <span class="pb-download__icon" aria-hidden="true">{{ \Illuminate\Support\Str::limit($ext, 4, '') }}</span>
                    <div class="pb-download__body">
                        <p class="pb-download__title">{{ ($file['title'] ?? '') ?: $name }}</p>
                        @if(filled($file['description'] ?? null) || filled($size))
                            <p class="pb-download__meta">
                                {{ $file['description'] ?? '' }}
                                @if(filled($size))
                                    <span class="pb-download__size">{{ $size }}</span>
                                @endif
                            </p>
                        @endif
                    </div>
                    <a href="{{ $url($file['file']) }}" class="pb-download__button" download="{{ $name }}" target="_blank" rel="noopener">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 4v12m0 0l-5-5m5 5l5-5M5 20h14" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        {{ $button }}
                    </a>
                </li>
            @empty
                <li class="pb-download pb-download--empty">No files added yet.</li>
            @endforelse
        </ul>
    </div>
</section>