@php
$currency = $brandCurrency;
@endphp
<article
    class="relative z-10 flex justify-between bg-white border border-gray-200 rounded-lg shadow cursor-pointer dark:bg-gray-800 dark:border-gray-700"
    {{-- wire:click="openModalProduct()" --}}
    wire:click="$dispatch('show-modal-product', { product: '{{ $product->id }}', category: '{{ $category->id }}' })">

    @if ($product->new)
    <div
        class="absolute inline-flex items-center mt-2 start-0 bg-red-200 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-r dark:bg-red-900 dark:text-red-200">
        <svg viewBox="0 0 611.999 611.999" fill="currentColor" class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg"
            xml:space="preserve">

            <path
                d="M 193.787 592.473 C 199.765 595.651 299.332 630.788 407.076 591.474 C 455.72 573.724 490.84 539.312 496.674 445.18 C 498.825 416.416 495.599 376.146 479.468 325.329 C 458.727 260.923 395.498 183.59 395.86 189.442 C 400.159 258.936 341.25 361.993 326.369 322.25 C 320.426 306.376 343.874 240.305 343.874 206.869 C 343.874 151.204 345.277 81.03 309.672 34.466 C 300.413 22.357 289.579 11.042 277.149 1.393 C 272.649 -2.101 266.126 1.411 266.538 7.093 C 269.272 44.829 266.795 152.978 171.914 282.182 C 85.885 402.033 119.221 494.078 131.05 519.008 C 153.666 566.767 162.979 576.092 193.787 592.473 Z">
            </path>
        </svg>
        <span>
            NUEVO
        </span>
    </div>
    @endif
    <img class="h-[130px] md:h-[150px] lg:h-[170px] w-[130px] md:w-[150px] lg:w-[170px] rounded-l object-cover object-center"
        loading="lazy" src="{{ asset($product->Imagen) }}" alt="{{ $product->name }}">
    <div class="p-2 w-full flex flex-col justify-between">
        <div class="flex flex-col">
            <h2 class="mb-1 font-bold text-sm md:text-lg text-black dark:text-white line-clamp-1 overflow-hidden">
                {{ $product->name }}
            </h2>
            <p class="mb-2 text-xs text-gray-700 dark:text-gray-400 line-clamp-2 overflow-hidden">
                {!! nl2br($product->description) !!}
            </p>
            <div class="flex flex-wrap gap-2">
                @foreach ($tags as $tag)
                <span
                    class="flex text-center line-clamp-1 overflow-hidden bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full dark:bg-gray-700 dark:text-gray-300">
                    {{ $tag['value'] }}
                </span>
                @endforeach
            </div>
        </div>
        <div class="flex flex-row justify-between items-center mt-2">
            <div class="font-bold text-black dark:text-white">
                @if ($product->price != 0)
                {{ $currency['symbol'] }} {{ number_format($product->price, $currency['decimals'],
                $currency['decimal_separator'], $currency['thousands_separator']) }}
                @endif
            </div>
            <div>
                <button type="button"
                    class="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-2.5 py-1.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                    Añadir
                </button>
            </div>
        </div>

    </div>
</article>