<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"}}
                  {{> modal-id-type }}
                </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>
