<div class="container">
  <div class="row">
    <div class="col-md-12 pl-0">
      <div class="row">
        <div class="col-md-7 signup-tradepro-wrap">
          {{#if fill-remaining}}
            {{> notifications notification-page.warning classModifier="notification_warning fill-remaining fill-remaining--local"
              text="Please fill in the remaining fields below, in order to create your account."}}
          {{/if}}
          <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"}}
                {{#if partner-number}}
                  {{> form-row id="partner-number" label="Membership number" tooltip="This is your membership number for the federation/organisation who referred you to Wickes"}}
                {{/if}}

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