<div class="o-modal  js-modal" hidden>
    <div class="o-modal__shader  js-modal-close"></div>
    <section class="o-modal__main">

        <form class="o-modal__content  js-modal-form" action="{{ localized_route('shoppingcart') }}" method="post">

            <input type="hidden" class="js-modal-product-id" name="product-id"/>
            <input type="hidden" class="js-modal-product-type" name="product-type"/>

            <button type="button" class="o-modal__close  js-modal-close">
                <span class="o-modal__close-text">
                    esc
                </span>
            </button>

            <div class="o-modal__image-container">
                <img class="o-modal__image  js-modal-image"/>
            </div>

            <div class="o-modal__main-content">

                <h3 class="o-modal__heading  js-modal-heading"></h3>
                <h4 class="o-modal__price">
                    <span class="o-modal__price-amount js-modal-price"></span> @lang('site/global.incl_vat')
                </h4>

                <div class="o-modal__add-to-cart-content  js-modal-add-to-cart">

                    <div class="o-modal__form">

                        <div class="o-modal__input  c-form-element  js-form-element js-modal-amount-of-persons">
                            <input class="c-input  js-modal-quantity"
                                   type="number"
                                   id="quantity"
                                   name="quantity"
                                   pattern="[0-9]+"
                                   min="1"
                                   step="1"
                                   max="999"/>
                        </div>

                        <div class="o-modal__add">
                            @include('site.components.button', [
                            'isButton' => true,
                            'buttonClasses' => 'js-add-product-button',
                            'modifiers' => ['icon', 'positive', 'is-reversed', 'full-width'],
                            'icon' => 'shoppingcart',
                            'buttonText' => __('site/global.place_in_cart'),
                            'properties' => 'type=button',
                        ])
                        </div>

                    </div>

                    <p class="o-modal__stack  js-modal-stack" >
                        @lang('site/global.stack')
                    </p>

                </div>

                <div class="o-modal__continue-choices  js-modal-continue-choices" hidden>

                    <p class="o-modal__product-added-notification">
                        <span class="o-modal__check">@include('site.components.icons.check')</span>
                        <span class="o-modal__product-added-text">@lang('shop/cart.product_added_to_cart')</span>
                    </p>

                    <div class="o-modal__button">
                        @include('site.components.button', [
                            'buttonLink' => localized_route('shoppingcart', [], false),
                            'buttonClasses' => 'js-to-shopping-cart',
                            'modifiers' => ['icon', 'positive'],
                            'buttonText' => __('shop/cart.to_cart'),
                            'properties' => 'type=button',
                        ])
                    </div>

                    <div class="o-modal__continue-line">

                        <span class="o-modal__continue-line-text">
                            @lang('shop/cart.or')
                        </span>

                        <span class="o-modal__continue-line-button">
                            @include('site.components.button', [
                                'buttonType' => 'text',
                                'modifiers' => ['action', 'lower-case', 'fs-base', 'fw-semiBold'],
                                'buttonText' => __('shop/cart.continue_shopping'),
                                'buttonClasses' => 'js-modal-close',
                                'properties' => 'type=button',
                            ])
                        </span>

                    </div>

                </div>

            </div>

        </form>
    </section>
</div>