{{> modal }}
{{#extend "modal" id="pdf-preview" title="Choose Type of ID" fullWidth=true classMod="pdf-preview" backdrop="true"}}
  {{#content "sections"}}

    {{!-- The PdfPreview root has to wrap both the controls and the pages container,
          so the sections sit inside it. The heading and controls keep the default
          modal column width, the pages container below spans the full popup. --}}
    <div id="pdf-preview-viewer" data-pdf-preview data-pdf-preview-page-class="pdf-preview__page">

      {{#extend "modal-body-section" customSectionClass="id-pdf-preview"}}
        {{#content "body"}}
          <div class="tradepro-field">
            <div class="pdf-preview__heading">
              <span class="icon icon__paperclip pdf-preview__icon">
                <i class="far fa-paperclip"></i>
              </span>
              <span class="signup-tradepro__modal-trigger pdf-preview__name"></span>
            </div>
            <div class="pdf-preview__controls">
              <button class="btn btn-secondary btn-sm" type="button" title="First page" data-pdf-preview-first>
                <span class="fas fa-angle-double-left"></span>
              </button>
              <button class="btn btn-secondary btn-sm" type="button" title="Previous page" data-pdf-preview-prev>
                <span class="fas fa-angle-left"></span>
              </button>
              <span class="pdf-preview__pages">
                <input class="pdf-preview__page-input" type="number" min="1" value="1" aria-label="Page number" data-pdf-preview-page>
                <span>/ <span data-pdf-preview-total></span></span>
              </span>
              <button class="btn btn-secondary btn-sm" type="button" title="Next page" data-pdf-preview-next>
                <span class="fas fa-angle-right"></span>
              </button>
              <button class="btn btn-secondary btn-sm" type="button" title="Last page" data-pdf-preview-last>
                <span class="fas fa-angle-double-right"></span>
              </button>
            </div>
          </div>
        {{/content}}
      {{/extend}}

      {{#extend "modal-body-section" customSectionClass="id-pdf-preview-pages"}}
        {{#content "body"}}
          <div class="pdf-preview__viewer" data-pdf-preview-pages></div>
        {{/content}}
      {{/extend}}

    </div>

    {{#extend "modal-body-section" customSectionClass="id-pdf-preview-actions"}}
      {{#content "body"}}
        <p class="pdf-preview__info">
          Do you want to use this PDF?
        </p>
        <div class="pdf-preview__actions">
          <a href="#" class="btn btn-primary pdf-preview_yes">
            <span class="btn__text">
              Yes <i>(keep)</i>
            </span>
          </a>
          <a href="#" class="btn btn-secondary pdf-preview_no">
            <span class="btn__text">
              No <i>(delete)</i>
            </span>
          </a>
        </div>
      {{/content}}
    {{/extend}}

  {{/content}}
{{/extend}}