@extends('web.themes.shella.layouts.app', [
    'page_name' => 'loose-fit-round-neck-sweater'
])

@php
    $user_liked_product = auth()->check() ? auth()->user()->favorites()->exists($product->id) : false;
    $user_add_to_cart = $cart_info ? true : false;
@endphp

@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><a href="/" class="text-md">{{ __('Home') }}</a></li>
                <li><span class="text-md">{{ $product->name }}</span></li>
            </ul>
        </div>
    </div>
    <div id="theme-section-product" class="theme-section">
        <div data-section-id="product" data-section-type="product-page" data-enable-history-state="true">
            <div class="product-page my-30">
                <div class="container">
                    <div class="product-page__container">
                        <div class="product-page__main">
                            <div class="product-page-main" 
                                data-js-product 
                                data-product-handle="{{ $product->slug }}"
                                data-product-variant-id="{{ $product->id }}"
                                data-js-product-clone-id="footbar"
                            >
                                <div class="row">
                                    {{-- Images --}}
                                    @include('web.themes.shella.pages.products.additional.product-images')

                                    {{-- Product info --}}
                                    @include('web.themes.shella.pages.products.additional.product-info')
                                </div>
                            </div>
                            <script>
                                Loader.require({
                                    type: "script",
                                    name: "plugin_sticky_sidebar"
                                });

                                Loader.require({
                                    type: "script",
                                    name: "sticky_sidebar"
                                });
                            </script>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <script>
            Loader.require({
                type: "script",
                name: "product"
            });
        </script>

    </div>

</main>
@stop
