{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout page_checkout-confirmation-new" title="Checkout - Delivery details Journey Error" isAsideSticky="true"}}
{{#content "steps"}}
{{> steps-three-steps active-step-index="1" clickCollect="true"}}
{{/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="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"}}
        {{> form-row
        type="email"
        id="email"
        label="Email"
        locked=true
        required=true
        value="random@gmail.com"
        }}
        <div class="form-row checkbox-form-row checkbox-form-row--full-width">
          <div class="form-row__field">
            {{> marketing-consent/marketing-preferences error="true"}}
          </div>
        </div>
      </div>
    </div>
  </div>

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