<div>
    <a href="{{ $downloadUrl }}" wire:click="clicked({{ $downloadId }})" download>
        <button id="dl-{{  $downloadId }}" class="group rounded-md shadow {{ $background }} text-white cursor-pointer flex justify-between items-center overflow-hidden transition-all hover:glow m-1 w-[190px] h-[65px]">
            <div class="relative w-12 h-[65px] bg-white bg-opacity-20 text-white flex justify-center items-center transition-all">
                <svg class="w-4 h-4 transition-all group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                </svg>
            </div>
            <div class="flex flex-col text-center w-full">
                @if($fillNumbers)
                <p class="text-lg">Episode {{ str_pad($episodeNumber, 2, '0', STR_PAD_LEFT) }}</p>
                @else
                <p class="text-lg">Episode {{ $episodeNumber }}</p>
                @endif
                <p class="text-xs">HEVC MKV {{ $fileSize ?? '' }}</p>
                <p class="text-xs" id="count-{{  $downloadId }}">Downloaded {{ $downloadCount }} times</p>
            </div>
        </button>
    </a>
</div>
