@if($style == 'product')
    <div class="product product-2">
        <figure class="product-media">
            <a
                href="{{ route('product',['subCategory_slug' => $product->subCategory->slug,'slug' => $product->slug]) }}">
                <img src="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH, 'webp')['url'] }}"
                    alt="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH)['alt'] }}"
                    title="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH)['title'] }}"
                    loading="lazy" class="product-image">
            </a>
        </figure>
        <div class="product-body">
            <div class="product-cat">
                {{ $product->subCategory->name }}
            </div>
            <h3 class="product-title mt-1"><a
                    href="{{ route('product',['subCategory_slug' => $product->subCategory->slug,'slug' => $product->slug]) }}">
                    {{ $product->name }} </a></h3>
            <div class="product-price mt-1">
                @if($product->price > 0 && $product->price != null)
                <strong> {{ $product->price }} {{nova_get_setting_translate('default_currency') ?? 'EGP'}} </strong>
                @endif
            </div>
        </div>
    </div>
    
    @elseif($style =='headerProduct')
    <div class="product product-2 header-product">
    <div class="product-body header-product-body">
            <div class="product-cat">
                {{ $product->subCategory->name }}
            </div>
            <h3 class="product-title mt-1"><a
                    href="{{ route('product',['subCategory_slug' => $product->subCategory->slug,'slug' => $product->slug]) }}">
                    {{ $product->name }} </a></h3>
            <div class="product-price mt-1">
                @if($product->price > 0 && $product->price != null)
                <strong> {{ $product->price }} {{nova_get_setting_translate('default_currency') ?? 'EGP'}} </strong>
                @endif
            </div>
        </div>
        <figure class="product-media header-product-media">
            <a
                href="{{ route('product',['subCategory_slug' => $product->subCategory->slug,'slug' => $product->slug]) }}">
                <img src="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH, 'webp')['url'] }}"
                    alt="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH)['alt'] }}"
                    title="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH)['title'] }}"
                    loading="lazy" class="product-image">
            </a>
        </figure>

    </div>
    
@elseif($style =='productSlider')
    <div class="banner mb-lg-1 mb-xl-2">
        <a
            href="{{ route('product',['subCategory_slug' => $product->subCategory->slug,'slug' => $product->slug]) }}">
            <img src="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH, 'webp')['url'] }}"
                alt="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH)['alt'] }}"
                title="{{ $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH)['title'] }}"
                loading="lazy" class="img-fluid">
        </a>
        <div class="banner-content">
            <h3 class="banner-title"><a
                    href="{{ route('product',['subCategory_slug' => $product->subCategory->slug,'slug' => $product->slug]) }}"
                    @if($product->color_name) style="color:{{$product->color_name}} !important;" @endif
                >{{ $product->name }}</a>
            </h3>
        </div>
    </div>
@endif