@props(['image' => false])

<div class="bg-grad-header">
    <div class="relative">
        <x-sections.header-top />
    </div>
 
    <div class="container-1 flex flex-col items-center pt-10 md:pt-0">
        @if(!empty($image))
            <div class="aspect-square w-60 translate-y-8 -my-10 relative rounded-sm overflow-hidden bg-purple-dark">
                <div class="inset-0 absolute bg-center bg-cover" style="background-image: url({{ $image }})"></div>
            </div>
        @else
            <div
                x-data="{
                coverArtUrl: '',
                setCoverArt(event) { this.coverArtUrl = event.detail.image }
            }"
                @headercoverart.window="setCoverArt"
                :class="coverArtUrl===''?'bg-purple-dark':''"
                class="aspect-square w-60 translate-y-8 -my-10 relative rounded-sm"
            >
                <div class="inset-0 absolute bg-center bg-cover" :style="`background-image: url('${coverArtUrl}')`"></div>
            </div>
        @endif
    </div>
</div>