{{#extend "left-aside" hybrisClass="hybris-class" pageClass="page_signup-tradepro" title="Wickes TradePro signup" logo-tp=true tradepro-nav=true}}
{{#content "head" mode="append"}}
<link type="text/css" rel="stylesheet" href="./css/pages/tradePro-signup.css">
{{/content}}
{{#content "heading"}}
{{> notifications notification-page.warning withCloseBtn="true"
text="Sorry, your TradePro application has already been submitted with this information"}}
<div class="page-header">
  <h1 class="page-header__title">Sign Up To Wickes TradePro Online</h1>
  <div class="page-header__intro">
    <img class="img-responsive" src="//media.wickes.co.uk/is/image/wickes/trade-pro-logo?hei=41&wid=200&fit=constrain">
    <p class="page-header__info">
      Simply fill out your details below. We’ll review your application and send you an email within 24 hours .
    </p>
    <p class="page-header__info">
      Please ensure you have <a href="#" class="tradepro__approved-id">two forms of approved ID</a> to prove you work in the trade.
    </p>
    <p class="page-header__info">
      You can also signup <a href="">in-store</a> or by phone, please call <a href="tel:03301239984">0330 123 9984.</a>
    </p>
  </div>
</div>
{{/content}}
{{#content "aside"}}
{{> aside-nav2 trade-pages page-name="Wickes TradePro"}}
{{/content}}
{{#content "main"}}
<div class="container">
  <div class="row">
    <div class="col-md-12 pl-0">
      <div class="row">
        <div class="col-md-7 signup-tradepro-wrap">
          <form class="signup-tradepro form-bg">
            <div class="signup-tradepro__row">
              <div class="signup-tradepro__descr">
                <div class="warning-required">Required fields</div>

                <h3 class="signup-tradepro__title">Proof of Trade ID</h3>
                <p class="signup-tradepro__paragraph warning-required">
                  Please supply two forms of approved ID
                </p>
                <div class="signup-tradepro__attach signup-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 choose-id" data-toggle="modal" data-target="#capture">
                      <span class="icon icon__paperclip">
                        <i class="far fa-paperclip"></i>
                      </span>
                      <input class="tradepro-attachment" type="file" accept="image/*" capture>
                      {{> attach-make make-capture=true}}
                    </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 class="mt-3"><!--just for prototype; markup on hybris side differs-->
                        <img class="mr-2" src="img/placeholders/thumbnail-sm.png"/><!--just for prototype; markup on hybris side differs-->
                        Trade business website
                      </div>
                      <span class="icon icon__notification">
                        <span class="fas fa-check-circle"></span>
                      </span>
                    </div>
                    <div class="chosen-form">
                      Ltd company: Registration number
                      <span class="icon icon__notification">
                        <span class="fas fa-check-circle"></span>
                      </span>
                    </div>
                  </div>
                  <div class="form-row__error pl-0">Error message here</div><!--just for prototype; markup on hybris side differs-->
                </div>
                <h3 class="signup-tradepro__title signup-tradepro__title">About you</h3>
                {{> form-row dropdown="true" id="title" label="Title" placeholder="Please select" required="true"
                    row-mod="row-title"}}
                {{> form-row id="first-name" label="First name" required="true"}}
                {{> form-row id="last-name" label="Last name" required="true"}}

                <h3 class="signup-tradepro__title">Account Details</h3>
                {{> form-row id="email" label="Email" required="true"}}
                {{> form-row id="mobile" label="Mobile" required="true"}}
                {{> signup-form}}
              </div>
            </div>
          </form>
        </div>
        <div class="component container divider-mob pr-0">
          <div class="row">
            <div class="col-12">
              <hr>
            </div>
          </div>
        </div>
        <div class="tradePro-card-wrap col-md-5 pr-0 pl-0">
          {{#each page_tradePro_cards.card_content}}
          {{>card_content modification="col tradePro-card" linkValue=linkValue secondary=true text=text}}
          {{/each}}
        </div>
      </div>
    </div>
  </div>
</div>
<div class="component container divider-desk pl-0 pr-0">
  <div class="row">
    <div class="col-12">
      <hr>
    </div>
  </div>
</div>
<div class="component container p-0">
  <div class="row">
    <div class="col-12">
      <p class="small-print">*The Wickes TradePro discount does not apply to Gift Vouchers or Delivery Charges
        and cannot be used with any other voucher code or coupon.
        <a href="/trade/terms-conditions">Click here to view the full terms &amp; conditions</a>
      </p>
    </div>
  </div>
</div>
{{/content}}
{{/extend}}

{{> modal-capture }}