@push('footer-javascript')
<script>
    function loadSize(element, product) {
        $('.product-options__value__size').removeClass('active');

        element.classList.add('active');

        window.Lara.productOnCart = product;
    }
</script>
@endpush

<div>
    <label>{{ __('Size') }}:</label>
    <div class="product-options__section d-flex flex-wrap" data-style="large-text" data-property="size" id="product-options-size-container">
        @foreach($productSizeVariants as $productSizeVariant)
            @if($productSizeVariant)
                <div class="
                    product-options__value 
                    product-options__value__size 
                    product-options__value--large-text 
                    d-flex 
                    flex-center 
                    border 
                    cursor-pointer 
                    {{ $loop->first ? 'active': '' }} 
                    lazyload"
                    onclick="loadSize(this, '{{ $productSizeVariant['id'] }}')" 
                >
                    {{ $productSizeVariant['size'] }}
                </div>
            @endif
        @endforeach
    </div>
</div>
