{{#extend "checkout-new" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Delivery details" isAsideSticky="true"}}
{{#content "steps"}}
{{> steps active-step-index="2" }}
{{/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>
                <p class="date-selection__info-block">
                    Our delivery slots are currently available up to 28 days in advance.
                    We release additional delivery slots daily.
                </p>
                <p class="date-selection__info-block date-selection__info-block-error">
                    <i class="icon fas fa-exclamation-circle"></i>
                    Grouped delivery is  not available for this order
                </p>
            </div>

            <div class="component component-date-selection">
                {{> date-selection-v2 wisdom=true latest=true}}
                {{> date-selection-v2 wisdom=true earlier=true hidden=true}}
            </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" error="Please enter a valid mobile number with no spaces e.g. 07700900000"}}
                {{> 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>


{{> checkout_voucher_large  title="Voucher Code"}}

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

{{/content}}

{{#content "foot" mode="append"}}
    <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">

                    <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}}


