{# Drawer #}
<div x-show="showModal" x-cloak x-transition:enter="transition ease-in-out duration-300 transform"
    x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
    x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-y-0"
    x-transition:leave-end="translate-y-full"
    class="fixed inset-x-0 bottom-0 bg-white w-full boxed z-30 shadow-[0_-15px_25px_rgba(0,0,0,0.05),0_-5px_10px_rgba(0,0,0,0.05)]">
    <div x-cloak x-show="selectedProducts.length >= 4" class="flex items-center justify-left gap-2 text-left pl-6 font-normal text-xs lg:text-sm mt-4 text-primary">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-6"><path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd"></path></svg> 
        <span class="text-black">Hai raggiunto il limite di</span> <strong>4</strong> <span class="text-black">device da confrontare</span>
    </div>
    <ul class="mb-16 grid lg:grid-cols-2 gap-4">
        <template x-for="product in selectedProducts" :key="product.id">
            <li class="relative flex items-center px-2 py-4 border-b last-of-type:border-0">
                <img :src="product.image_url" alt="Product Image" class="w-16 h-16 object-contain mr-4">
                <span x-text="`${product.producer_name} ${product.model}`"></span>

                <button @click="removeFromCompare(product.id)"
                    class="absolute border-2 right-6 lg:right-10 top-8 text-slate-300 rounded-full border-slate-300 p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
                        stroke="currentColor" class="size-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                    </svg>
                </button>
            </li>
        </template>
    </ul>

</div>

{# Drawer bar #}
<div x-show="selectedProducts.length" x-cloak x-transition:enter="transition ease-in-out duration-300"
    x-transition:leave="transition ease-in-out duration-300"
    class="fixed boxed bottom-0 left-0 right-0 bg-slate-900 py-2 px-4 flex items-center justify-between shadow-lg z-40">
    <div class="relative flex items-center border-2 border-slate-400 text-slate-400 p-2 rounded-full lg:cursor-pointer">
        <span :class="showModal ? 'opacity-0' : 'opacity-1'"
            class="absolute h-5 w-5 flex bg-emerald-500 text-white font-semibold text-xs transition-opacity ml-4 text-md rounded-full items-center justify-center -left-6 -top-1"
            x-text="selectedProducts.length">
        </span>
        <svg @click="showModal = !showModal" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke-width="1.5" stroke="currentColor" class="size-6 transition-transform duration-300 cursor-pointer"
            :class="showModal ? 'rotate-180' : 'rotate-0'">
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
        </svg>
    </div>
    <button @click="compareProducts()" :class="selectedProducts.length > 1 ? 'bg-primary border-primary border-2  text-white' : 'bg-transparent text-slate-400 border-2 border-slate-400'"
        class="px-4 py-2 rounded-md text-sm relative font-semibold flex items-center gap-2">
        <span x-text="selectedProducts.length > 1 ? 'VAI AL CONFRONTO' : 'seleziona almeno 2 {{device_type}}'">

        </span>
    </button>
</div>

<style>
    .border-slate-400 {
        border-color: #94a3b8;
    }

</style>