@extends('layouts.lookatme')

@section('title', trans('message.wishlist'))
@section('content')
    <div class="tw-mt-6 tw-px-8 md:tw-px-12 lg:tw-px-20 tw-flex tw-flex-col md:tw-flex-row">
        <aside class="tw-flex tw-flex-col tw-items-center tw-w-full md:tw-w-1/3 tw-mr-4">
            @include('templates.lookatme.my_account._sidebar-nav')
        </aside>
        <section class="tw-w-full tw-mt-8 md:tw-mt-0">
            <div class="tw-flex tw-items-center tw-justify-between">
                <h2 class="tw-border-0 tw-border-l-4 tw-border-solid tw-pl-4 tw-font-bold">
                    {{ trans('message.wishlist') }}
                </h2>
            </div>
            <hr>
            <div class="tw-flex tw-items-center tw-justify-between tw-mt-12 tw-flex-col">
                @if(!$products->isEmpty())
                    <div class="tw-w-full tw-mx-auto tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 2xl:tw-grid-cols-4 tw-gap-6">
                        @foreach($products as $product)
                            @include('templates.lookatme.components.card',[
                                'class'=>'tw-bg-gray',
                                'size'=>'tw-w-full',
                                'src'=> $product->picture_url,
                                'price'=>$product->price_text,
                                'title'=>$product->name,
                                'link' => route('product.detail',$product->id),
                                'discount' => $product->getDiscountPrice($product->unit_price),
                             ])
                        @endforeach
                    </div>
                @else
                    <div class="">You don't have any wish listing.</div>
                @endif
            </div>
        </section>
    </div>
@endsection