{{#extend "checkout" pageClass="page_checkout-delivery-details" title="Checkout - Delivery details" logout=true isAsideSticky="true"}}
{{#content "steps"}}
{{> steps active-step-index="2" }}

<div class="checkout-heading">
    <h3>Products delivered by Wickes</h3>
</div>
<div class="delivery-details-product-oos">
    <div class="product-oos-inner">
        <div class="row">
            <div class="content">
                <p>
                    The following product(s) in your basket are <strong>out of stock</strong>. Please remove the
                    item(s) to continue.
                </p>
                <span class="icon icon-info-component icon-info" data-toggle="tooltip" data-placement="bottom" title=""
                      data-original-title="Tooltip text goes here">
				    <i class="fas fa-question-circle"></i>
			    </span>

                {{#each page_shopping-cart.oosProductsNoPrice}}
                {{>order-line mod="order-line_shrink"}}
                {{/each}}
            </div>
            <aside class="right-aside">
                <button class="btn btn-primary btn_full btn-notify">
                    <span class="btn__text">Notify me</span>
                </button>
                <button class="btn btn-primary">
                    <span class="btn__text">Remove</span>
                </button>
            </aside>

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

{{/content}}
{{#content "main"}}
<div class="component component-date-selection">
    {{> date-selection}}
</div>
<a href="./page_checkout_payment-details.html" class="btn btn-action delivery-details__payment-details_mobile">Continue
    to payment details</a>
{{> checkout_delivery modal="modal-edit-delivery-address" }}
{{#extend "lines-group" name="Products delivered by Wickes" id=136589003 collapsed=false}}
{{#content "content"}}
{{#each page_shopping-cart.linesCollection}}
{{>order-line mod="order-line_shrink"}}
{{/each}}
{{/content}}
{{/extend}}


<div class="delivery-details-option">
    {{>checkout-supply-info checkout-components.supply-info.[0]}}
</div>
{{#extend "lines-group" name="Products delivered by our supplier" id=136589004 collapsed=false}}
{{#content "content"}}
{{#each page_shopping-cart.linesCollection}}
{{>order-line mod="order-line_shrink"}}
{{/each}}
{{/content}}
{{/extend}}

<div class="delivery-details-option__contact-details">
    {{>checkout-supply-info checkout-components.supply-info.[1]}}
    <form class="form-wrapper your-contact-details form-bg">
        <div class="your-contact-details__row">
            <div class="your-contact-details__descr">
                <h3>Your contact details</h3>
                <p>Please enter your phone number(s) below so we can contact you regarding your order.</p>
                <div class="warning-required">
                    Required fields
                </div>
                {{> form-row type="tel" id="mobile" label="Mobile phone" required="true"}}
                {{> form-row type="tel" id="home-phone" label="Home phone" row-mod="row-tel"}}
                <h3>Simplify your collection</h3>
                <p>All the Click &amp; Collect items in your order are currently available at the following stores.
                    Select
                    one of the store to collect all your items from the same location.
                </p>
                <div class="your-contact-details__checkbox-wrap">
                    <div class="your-contact-details__checkbox">
                        {{#extend "radiobutton" id="oldham" name="store" label="Oldham" checked="true"}}
                        {{#content "html"}}
                        <span class="distance">6.2 Miles</span>
                        <div class="store-address">
                            <div class="store-address__street">Wickes Larch Street,</div>
                            <div class="store-address__town">Oldham</div>
                            <div class="store-address__city">Greater Manchester,</div>
                            <div class="store-address__postcode">OL8 1TA</div>
                            <div class="store-address__country">United Kingdom</div>
                        </div>
                        {{/content}}
                        {{/extend}}
                    </div>
                    <div class="your-contact-details__checkbox">
                        {{#extend "radiobutton" id="clifton" name="store" label="Clifton"}}
                        {{#content "html"}}
                        <span class="distance">4.9 Miles</span>
                        <div class="store-address">
                            <div class="store-address__street">Wickes Wynne Avenue,</div>
                            <div class="store-address__town"> Clifton, Swinton</div>
                            <div class="store-address__city">Greater Manchester,</div>
                            <div class="store-address__postcode">M27 8FU</div>
                            <div class="store-address__country">United Kingdom</div>
                        </div>
                        {{/content}}
                        {{/extend}}
                    </div>
                </div>
                <p class="order-update">I would like to update my order to collect all my items from one store.</p>
            </div>
        </div>
        <div class="form-row form-row__action">
            <div class="form-row__col-btn">
                <button class="btn btn-primary">
                    <span class="btn__text">Simplify collection</span>
                </button>
            </div>
        </div>
    </form>
</div>


<div class="delivery-details-option delivery-details-option_time-slot">
    <h4>Collection from Oldham store <span class="checkout__text-highlighted">1 Item</span></h4>
    <div class="delivery-details-option__delivery-info">
        <div class="delivery-details-option__delivery-info-left">
            {{>checkout-address-time time=true within=true}}
        </div>
        <div class="delivery-details-option__delivery-info-right">
            {{>schedule}}
        </div>
    </div>
</div>

{{#extend "lines-group" name="Products for Click & Collect from Oldham" id=132589405 collapsed=false}}
{{#content "content"}}
{{#each page_shopping-cart.linesCollection}}
{{>order-line mod="order-line_shrink"}}
{{/each}}
{{/content}}
{{/extend}}


<div class="delivery-details-option delivery-details-option_time-slot">
    <h4>Collection from Oldham store <span class="checkout__text-highlighted">1 Item</span></h4>
    <div class="delivery-details-option__delivery-info">
        <div class="delivery-details-option__delivery-info-left">
            {{>checkout-address-time time=true within=true}}
        </div>
        <div class="delivery-details-option__delivery-info-right">
            {{>schedule}}
        </div>
    </div>
</div>

{{#extend "lines-group" name="Products for Click & Collect from Oldham" id=136539006 collapsed=false}}
{{#content "content"}}
{{#each page_shopping-cart.linesCollection}}
{{>order-line mod="order-line_shrink"}}
{{/each}}
{{/content}}
{{/extend}}


<a href="./page_checkout_payment-details.html" class="btn btn-action delivery-details__payment-details">Continue to
    payment
    details</a>

{{/content}}
{{#content "aside"}}
{{> checkout_order-summary label="Subtotal: " action='./page_checkout_payment-details.html'}}
{{> checkout_voucher }}
{{> checkout_delivery modal="modal-edit-delivery-address" }}
{{> checkout_supplier-delivery edit="true" }}
{{> checkout_click-and-collect invisibleForMobile="true" }}
<a href="./page_checkout_payment-details.html" class="btn btn-action delivery-details__payment-details_mobile">Continue
    to payment
    details</a>
{{/content}}
{{#content "foot" mode="append"}}
<script defer src="js/page/checkout-edit-address.js"></script>

{{#extend "modal" classMod="edit-delivery-address" id="modal-edit-delivery-address" title="Edit delivery address" fullWidth=true}}
{{#content "body"}}
<div class="component">
    {{> notifications
    classModifier="notification_warning"
    text="<strong>Please note:</strong> Changing your delivery address may impact our ability
    to deliver your order on the date you have selected.<br/>
    You may have to re-select your delivery date and slot after changing your delivery address."
    warning=true
    }}
</div>
{{> user-address-simplified modal="true" editUrl="page_checkout_delivery-address.html" radioName="checkout-edit-delivery-details" mod="js-selectable"}}
<div class="edit-delivery-address__actions row">
    <div class="edit-delivery-address__add-btn">
        <a href="page_checkout_delivery-address.html" class="btn btn-secondary">
            <span class="btn__text">Add new address</span>
        </a>
    </div>
    <div class="edit-delivery-address__delivery-btn">
        <button class="btn btn-action">
            <span class="btn__text">Continue to delivery details</span>
        </button>
    </div>
</div>
{{/content}}
{{/extend}}

{{/content}}
{{/extend}}
