{{#extend "modal" id="attach" title="Choose Type of ID" fullWidth=true classMod="id-type" backdrop="true"}}
  {{#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 d-none">
      <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 tradepro-field--has-pdf" data-pdf-preview-field title="lorem_ipsum.pdf">
            <img class="tradepro-field__pdf-icon mr-0" src="img/file-pdf-solid-full.svg"/>
            <span class="icon icon__paperclip d-none">
      <i class="far fa-paperclip"></i>
    </span>
            <span class="icon icon__camera d-none">
      <i class="far fa-camera"></i>
    </span>
            <a href="#" class="signup-tradepro__modal-trigger">Landlord Insurance Policy</a>
            <input class="tradepro-attachment" type="file" accept="image/*,application/pdf">
            <div class="tradepro-field__hint">
              <span class="icon icon__info">
                <i class="fas fa-info-circle"></i>
              </span>
              You can upload an image or a pdf up to 2 MB
            </div>
          </div>
          <div class="tradepro-field" data-pdf-preview-field>
            <img class="tradepro-field__pdf-icon mr-0 d-none" src="img/file-pdf-solid-full.svg"/>
    <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">Blank Tenancy Agreement</a>
            <input class="tradepro-attachment" type="file" accept="image/*,application/pdf">
            <div class="tradepro-field__hint">
              <span class="icon icon__info">
                <i class="fas fa-info-circle"></i>
              </span>
              You can upload an image or a pdf up to 2 MB
            </div>
            <div class="tradepro-field__hint">
              <span class="icon icon__lock">
                <i class="fas fa-lock"></i>
              </span>
              We know how important document privacy is. When you upload your blank tenancy agreement, it is immediately shielded by end-to-end encryption.
            </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">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}}