{{#extend "checkout-new" pageClass="page_checkout page_checkout-confirmation-new" title="Checkout - Confirmation"
logout=true}}
{{#content "steps"}}
<div class="header-wrap">
    <h1 class="header__title">Order Confirmation</h1>
    <p class="header__order-block">Order number: <span class="header__order-number">143402004</span></p>
</div>
{{/content}}
{{#content "main"}}

<div class="confirmation-result-wrap">
    <div class="confirmation-result__notif">
        <span class="notif-check"><i class="fas fa-check"></i></span>
        <span class="notif-info">Your Order Was Successful!</span>
    </div>

    <p class="confirmation-result__info">
        We have emailed your order confirmation to <a href="mailto:petra.mendez@gmail.com">petra.mendez@gmail.com</a> with details of when your order will be delivered. This email will also contain our contact details should you wish to get in touch with us.
    </p>

    <div class="confirmation-result__action">
        <a href="https://www.wickes.co.uk/track-my-order" class="btn btn-primary"><i class="fas fa-map-marked-alt"></i> Track My Order</a>
        <a href="https://www.wickes.co.uk/my-account/orders" class="btn btn-primary">View My Order</a>
        <a href="./" class="btn btn-secondary">Return Shopping</a>
    </div>
</div>

{{#with checkoutOrder.delivery.[0]}}
    {{>checkout-order}}
{{/with}}


{{#with checkoutOrder.clickCollect.[0]}}
    {{>checkout-order}}
{{/with}}


{{#with checkoutOrder.charity.[0]}}
    {{>checkout-order charity="true"}}
{{/with}}


{{> checkout_payment-new apple=true}}
{{> checkout_order-summary-new label="Subtotal:" confirmationSummary="true"}}

<form class="checkout-tradepro form-bg">
    <div class="checkout-tradepro__row">
      <div class="checkout-tradepro__descr">
        <div class="checkout-tradepro__info-wrap">
          <div class="checkout-tradepro__info">
            It looks like you're in the Trade?
            You could be eligible to join TradePro and get
            <strong>10% off future purchases whenever you shop in-store or online.</strong>
          </div>
          <a href="#" class="checkout-tradepro__learn-more">Learn more about TradePro</a>
        </div>
        <h3>TradePro Signup</h3>
        <div class="warning-required">Required fields</div>
        <h3 class="checkout-tradepro__title">Proof of Trade ID</h3>
        <p class="checkout-tradepro__paragraph warning-required">
          Please supply two forms of approved ID
        </p>
  
        <div class="signup-tradepro__attach checkout-tradepro__attach_id">
          {{> attach-make make-attachment=true}}
          {{> modal id="attac"}}
          {{#extend "modal" id="attach" title="Choose Type of ID" fullWidth=true classMod="id-type"}}
          {{#content "sections"}}
  
          {{#extend "modal-body-section" customSectionClass="id-type-signup"}}
          {{#content "body"}}
          {{> notifications notification-page.warning withCloseBtn="true"
          text="Unable to attach file. Only JPG, PNG, GIF, BMP, WEBP, TIFF and HEIF image files are supported."}}
          <div class="signup-tradepro__modal-info">
            Select two forms of ID.
            <div class="tradepro-id-counter_wrap">
              <span>1</span>
              of
              <span>2</span>
            </div>
            ID's chosen
          </div>
          <div class="signup-tradepro__modal-fields">
            <div class="tradepro-field">
              <span class="icon icon__link inactive-el">
                <i class="far fa-link"></i>
              </span>
              <a href="#" class="signup-tradepro__modal-trigger inactive-el">Trade business website</a>
              <div class="signup-tradepro__modal-action">
                <div class="form-row" data-row-required="">
                  <label class="form-row__label"></label>
                  <div class="form-row__field">
                    {{> input need-pattern=true}}
                    <div class="form-row__error">{{error}}</div>
                  </div>
                </div>
                <div class="signup-tradepro__modal-buttons">
                  <div class="row">
                    <div class="button-done">
                      <button class="btn btn-primary">
                        Done
                      </button>
                    </div>
                    <div class="button-cancel">
                      <button class="btn btn-secondary">
                        Cancel
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tradepro-field">
              <span class="icon icon__link">
                <i class="far fa-link"></i>
              </span>
              <span class="icon icon__pencil">
                <i class="far fa-pencil"></i>
              </span>
              <a href="#" class="signup-tradepro__modal-trigger">Check a trade profile</a>
              <div class="signup-tradepro__modal-action">
                <div class="form-row" data-row-required="">
                  <label class="form-row__label"></label>
                  <div class="form-row__field">
                    {{> input need-pattern=true}}
                    <div class="form-row__error">{{error}}</div>
                  </div>
                </div>
                <div class="signup-tradepro__modal-buttons">
                  <div class="row">
                    <div class="button-done">
                      <button class="btn btn-primary">
                        Done
                      </button>
                    </div>
                    <div class="button-cancel">
                      <button class="btn btn-secondary">
                        Cancel
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tradepro-field">
              <span class="icon icon__link">
                <i class="far fa-link"></i>
              </span>
              <a href="#" class="signup-tradepro__modal-trigger">Facebook trade business page</a>
              <span class="icon icon__notification">
                <span class="fas fa-check-circle"></span>
              </span>
              <div class="signup-tradepro__modal-action">
                <div class="form-row" data-row-required="">
                  <label class="form-row__label"></label>
                  <div class="form-row__field">
                    {{> input need-pattern=true}}
                    <div class="form-row__error">{{error}}</div>
                  </div>
                </div>
                <div class="signup-tradepro__modal-buttons">
                  <div class="row">
                    <div class="button-done">
                      <button class="btn btn-primary">
                        Done
                      </button>
                    </div>
                    <div class="button-cancel">
                      <button class="btn btn-secondary">
                        Cancel
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tradepro-field">
              <span class="icon icon__link">
                <i class="far fa-link"></i>
              </span>
              <a href="#" class="signup-tradepro__modal-trigger">Mybuilder profile</a>
              <div class="signup-tradepro__modal-action">
                <div class="form-row" data-row-required="">
                  <label class="form-row__label"></label>
                  <div class="form-row__field">
                    {{> input need-pattern=true}}
                    <div class="form-row__error">{{error}}</div>
                  </div>
                </div>
                <div class="signup-tradepro__modal-buttons">
                  <div class="row">
                    <div class="button-done">
                      <button class="btn btn-primary">
                        Done
                      </button>
                    </div>
                    <div class="button-cancel">
                      <button class="btn btn-secondary">
                        Cancel
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tradepro-field">
              <span class="icon icon__paperclip">
                <i class="far fa-paperclip"></i>
              </span>
              {{> attach-make make-capture=true}}
              <input class="tradepro-attachment" type="file" accept="image/*" capture>
            </div>
            <div class="tradepro-field">
              <img src="img/placeholders/thumbnail-sm.png"/>
                <span class="icon icon__paperclip">
                  <i class="far fa-paperclip"></i>
                </span>
              <span class="icon icon__camera">
                <i class="far fa-camera"></i>
              </span>
              <a href="#" class="signup-tradepro__modal-trigger">Letterhead</a>
              <input class="tradepro-attachment" type="file" accept="image/*" capture>
            </div>
            <div class="tradepro-field">
              <span class="icon icon__paperclip">
                <i class="far fa-paperclip"></i>
              </span>
              <span class="icon icon__camera">
                <i class="far fa-camera"></i>
              </span>
              <a href="#" class="signup-tradepro__modal-trigger">Compliment slip</a>
              <input class="tradepro-attachment" type="file" accept="image/*" capture>
            </div>
            <div class="tradepro-field">
              <span class="icon icon__edit">
                <i class="fas fa-edit"></i>
              </span>
              <a href="#" class="signup-tradepro__modal-trigger">Ltd company: Registration number</a>
              <div class="signup-tradepro__modal-action">
                <div class="form-row" data-row-required="">
                  <label class="form-row__label"></label>
                  <div class="form-row__field">
                    {{> input need-pattern=true}}
                    <div class="form-row__error">{{error}}</div>
                  </div>
                </div>
                <div class="signup-tradepro__modal-buttons">
                  <div class="row">
                    <div class="button-done">
                      <button class="btn btn-primary">
                        Done
                      </button>
                    </div>
                    <div class="button-cancel">
                      <button class="btn btn-secondary">
                        Cancel
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tradepro-field">
              <span class="icon icon__edit">
                <i class="fas fa-edit"></i>
              </span>
              <a href="#" class="signup-tradepro__modal-trigger">Plc: Registration number</a>
              <div class="signup-tradepro__modal-action">
                <div class="form-row" data-row-required="">
                  <label class="form-row__label"></label>
                  <div class="form-row__field">
                    {{> input need-pattern=true}}
                    <div class="form-row__error">{{error}}</div>
                  </div>
                </div>
                <div class="signup-tradepro__modal-buttons">
                  <div class="row">
                    <div class="button-done">
                      <button class="btn btn-primary">
                        Done
                      </button>
                    </div>
                    <div class="button-cancel">
                      <button class="btn btn-secondary">
                        Cancel
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {{/content}}
          {{/extend}}
  
          {{/content}}
          {{/extend}}
        </div>
        <div class="chosen-form-container">
          <div class="chosen-form-wrap">
            <div class="chosen-form">
              <div>
                <img class="mr-2" src="img/placeholders/thumbnail-sm.png"/>
                Trade business website
              </div>
              <span class="icon icon__notification">
              <span class="fas fa-check-circle"></span>
            </span>
            </div>
            <div class="form-row__error">Error message here</div>
            <div class="chosen-form">
              <div>
                <img class="mr-2" src="img/placeholders/thumbnail-sm.png"/>
                Ltd company: Registration number
              </div>
  
              <span class="icon icon__notification">
              <span class="fas fa-check-circle"></span>
            </span>
            </div>
            <div class="form-row__error">Error message here</div>
          </div>
        </div>
        {{> signup-form}}
      </div>
    </div>
</form>

{{/content}}

{{#content "aside"}}
{{> checkout_information info-icon="true"}}
{{/content}}

{{#content "foot" mode="append"}}
<script defer src="./js/page/checkout-confirmation-new.js"></script>
{{/content}}

{{/extend}}
