<!-- BG -->
@php 
    $array = \cache()->remember('background', 300, function () {
        $bg = new \App\Models\SiteBackground();
        return $bg->getImages();
    });
@endphp

<div class="fixed top-0 z-0 left-0 w-screen h-screen">
    @if ($array->isNotEmpty())
    @php
        $imageId = $array->random();
    @endphp
    <img
        class="absolute left-0 top-0 w-full opacity-50 fade-img"
        src="/images/background/{{ $imageId }}-1080p.webp"
        srcset="/images/background/{{ $imageId }}-640p.webp 640w,
                /images/background/{{ $imageId }}-720p.webp 720w,
                /images/background/{{ $imageId }}-1080p.webp 1080w,
                /images/background/{{ $imageId }}-1440p.webp 1440w"
        sizes="(max-width: 640px) 640px,
            (max-width: 1080px) 720px,
            (max-width: 1440px) 1080px,
            1440px"
        loading="lazy"
        height="640px"
    >
    @else
    <img
        class="absolute left-0 top-0 w-full opacity-50 fade-img"
        src="/images/hs_branding_1.webp"
        loading="lazy"
    >
    @endif
</div>
