@extends('web.themes.shella.layouts.app')

@section('content')
<main id="MainContent">
    <div class="breadcrumbs mt-15">
        <div class="container">
            <ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <li style="font-size: 1.6em;"><a href="/">{{ __('Home') }}</a></li>
                <li style="font-size: 1.6em;"><span class="text-capitizalize">{{ __('Wish list') }}</span></li>
            </ul>
        </div>
    </div>
    <div class="page-wishlist mb-40">
        <div class="wishlist">
            <div class="container">
                <div class="wishlist__head d-flex justify-content-lg-center align-items-center position-relative mb-15 mb-lg-30">
                    <h1 class="h3 mt-20 mb-0 text-center text-capitizalize" data-js-store-lists-has-items-wishlist>{{ __('Wish list') }}</h1>
                    
                    @if(! $products->isEmpty())
                        <div class="wishlist__button-remove position-absolute d-inline-flex align-items-center cursor-pointer right-0" onclick="Event.fire('clearWishlist')">
                            <i class="mb-4 mr-4">
                                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-165" viewBox="0 0 24 24">
                                    <path d="M4.741 21.654a.601.601 0 0 1-.186-.439v-15h-1.25a.598.598 0 0 1-.439-.186.597.597 0 0 1-.186-.439.6.6 0 0 1 .186-.439.604.604 0 0 1 .439-.186h5v-2.5a.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186h6.25c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439v2.5h5c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186h-1.25v15a.6.6 0 0 1-.186.439.601.601 0 0 1-.439.186H5.18a.598.598 0 0 1-.439-.186zM18.305 6.215h-12.5V20.59h12.5V6.215zM9.37 9.525a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965a.6.6 0 0 1 .186-.439.594.594 0 0 1 .438-.186c.169 0 .316.062.44.185zm.185-4.56h5V3.09h-5v1.875zm2.94 4.56a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965a.6.6 0 0 1 .186-.439.604.604 0 0 1 .439-.186c.168 0 .315.062.439.185zm2.246 0a.604.604 0 0 1 .439-.186c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965c0-.169.062-.316.186-.44z"/>
                                </svg>
                            </i>
                            <span class="text-uppercase" onclick="">{{ __('Remove all')  }}</span>
                        </div>
                    @endif

                </div>

                @if($products->isEmpty())
                    <p class="text-center">{{ __('No products were added to the Wish List') }}</p>
                @endif

                @include('web.themes.shella.components.products.collection.grid-products', [
                    'products' => $products
                ])
            </div>
        </div>
    </div>
</main>
@stop