<div class="flex flex-col">
    <a data-te-collapse-init data-te-ripple-init data-te-ripple-color="light" href="#collapseBackupDownloads" role="button" aria-expanded="false" aria-controls="collapseBackupDownloads" class="text-sm text-center cursor-pointer pt-2 text-rose-600">Backup server</a>
    <div class="!visible hidden" id="collapseBackupDownloads" data-te-collapse-item>
        <div class="block rounded-lg bg-neutral-200 p-6 dark:bg-neutral-900 dark:text-neutral-50">
            <p class="text-sm text-red-600">Only use these if you live in Asia (e.g. Singapore/Philippines/...) and experience slow downloads (~10-100kbps) with the normal download links!</p>

            <div class="flex flex-wrap justify-around">
            @foreach ($dlList as $hdl)
            @php
                $download = $hdl->getDownloadByType('FHD');
                $downloadURL = $dlDomainsBackup[array_rand($dlDomainsBackup)].'/'.$download->url;
                $background = 'bg-green-600';
            @endphp

            <livewire:download-button 
                :download-url="$downloadURL" 
                :download-id="$download->id" 
                :download-count="$download->count" 
                :episode-number="$hdl->episode" 
                :fill-numbers="$fillNumbers" 
                :file-size="$download->getFileSize()" 
                :background="$background">
            @endforeach
            </div>
        </div>
    </div>
</div>

