{{#extend "base" hybrisClass="hybris-class" pageClass="page-product-details" title="Product details page"}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/page_product-details.css">
{{/content}}
{{#content "body"}}
<main>
    <div class="w-100 text-center pb-2">
        <h1>
            <a href="#" id="pdp-oos-product" class="link-primary" data-toggle="modal" data-target="#modal-product-notify">Test notify me back in stock button</a>
        </h1>
    </div>

    <div class="modal modal-box modal-box_full" id="modal-product-notify" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-box__container" role="document">
            <div class="modal-box__row justify-content-center">
                <div class="modal-box__columns">
                    <div class="modal-content modal-box__content">
                        <div class="modal-header modal-box__header">
                            <div class="justify-content-center">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-12">
                                            <h3 class="modal-title modal-box__title">Notify me when this is back in stock</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="close modal-box__btn-close d-print-none" type="button" data-dismiss="modal" aria-label="Close">
                                <span class="icon" aria-hidden="true"><span class="far fa-times"></span></span>
                            </button>
                        </div>
                        <div class="modal-body modal-box__body popup-content">
                            <div class="component container">
                                <div class="row">
                                    <div class="col-12">
                                        <form class="mb-3" action="#">
                                            {{> form-row id="email-address" label="Email address" required="true"}}
                                                <div class="form-row__col-btn">
                                                <button class="btn btn-primary btn_full">
                                                    <span class="btn__text">Notify me</span>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="pdp">
            <div class="pdp__title">
                <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long title in
                    two raws</h1>
            </div>
            <div class="pdp__product-code">
                <span class="product-code">Product code: <strong id="product-code-val">236334</strong></span>
            </div>
            <div class="pdp__reviews_small">
                <span class="review-stars"></span>
                <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews">82 reviews</a></span><span
                    class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews">Write a review</a></span>
            </div>
            <div class="pdp__gallery">
                {{> gallery-pdp }}
            </div>
            <div class="pdp__aside">
                {{> price-block }}
                <div class="pdp__actions">
                    {{> pdp-cta }}
                </div>
                <div class="pdp__similar">
                    {{> similar-products }}
                </div>
            </div>
            <div class="pdp__description">
                {{> product-main-info }}
            </div>
            <div class="pdp__tabs">
                {{> tabs_product-details }}
            </div>
            <div class="pdp__reviews">
                <a id="pdp-reviews"></a>
                <h2>Reviews placeholder</h2>
            </div>
        </div>
    </div>

</main>
{{/content}}
{{#content "foot" mode="append"}}
<script type="text/html" id="mini-basket-popup">
    {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
</script>
<script defer src="./js/page/pdp.js"></script>
{{> click-and-collect-modal}}
{{/content}}
{{/extend}}
