{{#extend "checkout-new" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Delivery details calendar not loaded" isAsideSticky="true"}}
{{#content "steps"}}
{{> steps-three-steps active-step-index="1"}}
{{/content}}

  {{#content "head" mode="append"}}
    <link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
    <link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
  {{/content}}

  {{#content "aside"}}
    {{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
  {{/content}}


{{#content "main"}}
    <div class="delivery-block">
        <h3 class="delivery-block__heading">Delivery Information</h3>
        <div class="delivery-block__wrapper">

            <div class="date-selection__wrapper">
                <h3 class="date-selection__header">Select delivery date</h3>
                <p class="date-selection__info-block">
                    Please choose a date for delivery from the calendar below
                </p>
            </div>

            <div class="component component-date-selection">
                <div class="delivery-details-product-oos">
                    <div class="product-oos-inner">
                    <div class="row">
                        <div class="content">
                            <h5>
                                We will pick the next available slot for you
                            </h5>
                            <p>The delivery calendar is not available at the moment but don't worry, we will pick the next available delivery slot for you. We will be in touch via email to confirm your delivery date.</p>
                            <p>Please press the Payment details button to continue.</p>
                        </div>
                    </div>
                    </div>
                </div>
            </div>


            {{#with checkoutOrder.deliveryDeliveryDetails.[0]}}
                <div class="checkout-order">
                    {{> checkout-order-block}}
                </div>
            {{/with}}


        </div>
    </div>

    <div class="click-collect-block">
        <h3 class="click-collect-block__heading">Click & Collect</h3>

        <div class="click-collect-block__head-info">
            <p>Simply enter or correct the contact information required below and continue to the next step of the checkout.</p>
            <div class="head-info__wrapper">
                <div class="head-info__wrapper-exclamation">
                    <i class="far fa-exclamation-circle"></i>
                    <span>Your order will be held for up to 24 hours</span>
                </div>
                <div class="head-info__wrapper-text">
                    <p>You will receive a text when your order is ready to collect (usually within 1 trading hour of receiving your order confirmation email).</p>
                    <p>Please wait for confirmation before travelling to your chosen store.</p>
                </div>
            </div>
        </div>

        <div class="click-collect-block__wrapper">

          {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
            <div class="checkout-order">
                {{> checkout-order-block}}
            </div>
          {{/with}}

          <div class="add-contact-details">
              <h3 class="add-contact-details__heading">Add contact details</h3>
              <p>Please enter your phone number(s) below so we can contact you regarding your order.</p>

              <div class="add-contact-details__form">
                {{> form-row type="tel" id="mobile" label="Mobile number" required="true"}}
                {{> form-row type="tel" id="home-phone" label="Home phone"}}
              </div>
          </div>
        </div>
    </div>

    <div class="simplify-collection">
        <h3 class="simplify-collection__heading">Simplify your collection</h3>
        <p class="simplify-collection__info">All the Click & 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="simplify-collection__wrapper">
            <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="simplify-collection__info">I would like to update my order to collect all my items from one store.</p>

        <button class="btn btn-primary simplify-collection__btn">
            <span class="btn__text">Simplify collection</span>
        </button>
    </div>

  <div class="continue-btn">
      <button class="btn btn-action">Continue to Payment Details</button>
  </div>

{{/content}}

{{#content "foot" mode="append"}}
{{> checkout-voucher-remove-modal
    shopping-cart-v2.checkout.voucher-remove-popup
    id="voucher-remove-popup"
}}
    <script defer src="./js/page/checkout-confirmation-new.js"></script>
    <script defer src="./js/page/select-address.js"></script>

    {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
        {{#content "body"}}
            <div class="edit-address-modal-block">
                <div class="delivery-block__wrapper customer-journey-block">
                    {{> notifications notification-page.error-deliver-area}}
                    <div class="delivery-block__wrapper customer-journey-block">
                        {{> user-address-delivery radioName="checkout-address-radio" modal="modalDeliveryEdit" selectedAddress=true simpleAddress=true isDeleted=true}}
                    </div>
                </div>

                <button class="btn btn-action btn_full">
                    <span class="btn__text">Continue to delivery details</span>
                </button>
            </div>
        {{/content}}
    {{/extend}}

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