@extends('frontend::layouts.master')

@section('content')
<div class="bg-top-sub-gradient">
    <div class="container pt-5 pb-12 md:pb-16">
        <div class="flex flex-col lg:flex-row lg:gap-6 pt-2 lg:pt-0">
            <x-frontend::member.member-navigation.template active="3"></x-frontend>
            <x-frontend::member.member-content-area.template title="My Favorite">
                <x-slot:content>
                    <div class="flex -mx-3 gap-y-6 flex-wrap favorite-product-card">
                        @for ($xi = 1; $xi < 4; $xi++)
                            @for ($i = 1; $i < 5; $i++)
                                <div class="w-full xtn:w-1/2 md:w-1/3 2xl:w-1/4 px-3">
                                    <x-frontend::card.product-card.template link="product-detail"
                                        productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                        productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                        productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                        brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                        brandName="EZVIZ" :badges="[
                                            [
                                                'name' => 'new',
                                                'title' => 'New',
                                            ],
                                            [
                                                'name' => 'Best price',
                                                'title' => 'New',
                                            ],
                                            [
                                                'name' => 'flash',
                                                'title' => 'Flash sale',
                                            ],
                                        ]" tag="Free special gift"
                                        price="2,500" discountPrice="2,690" :flashSale=false
                                        progressPercentage="25" progressText="1 sold" warranty="2 years warranty"
                                        addToCartLink="#">
                                        <x-slot:addon>
                                            <div class="px-3 pb-3">
                                                <a href="#" class="relative z-[1] py-2 block text-center justify-center w-full button-primary mt-2">ลบ</a>
                                            </div>
                                        </x-slot:addon>
                                    </x-frontend>
                                </div>
                        @endfor
                    @endfor
                    <div class="w-full pt-6 pb-4 text-center">
                        <x-frontend::navigation.pagination.template></x-frontend::navigation.pagination.template>
                    </div>
                </div>
                </x-slot:content>
            </x-frontend>
        </div>
    </div>
</div>

@endsection