<!-- Bootstrap 4 modal dialog markup https://getbootstrap.com/docs/4.1/components/modal/ -->

<div class="modal modal-box {{#if fullWidth}}modal-box_full{{/if}} {{#if wide}}modal-box_wide{{/if}}{{classMod}}"
     id="{{id}}" role="dialog" tabindex="-1"
>
  <div class="modal-dialog modal-box__container" role="document">
    <div class="modal-box__row justify-content-center">
      <div class="modal-box__columns">
        <div class="modal-content modal-box__content">
          <div class="modal-header modal-box__header d-none {{#if title}}d-block{{/if}}">
            <div class="modal-box__inner-row justify-content-center">
              <div class="modal-box__inner-columns">
                {{#block "header"}}{{/block}}
                <h3 class="modal-title modal-box__title">
                  <span class="icon mr-3 link-secondary d-none {{#if classIconTitle}}d-inline-block{{/if}}" aria-hidden="true">
                    <span class="{{classIconTitle}}"></span>
                  </span>
                  {{title}}
                </h3>
              </div>
            </div>
            <button class="close modal-box__btn-close d-print-none" type="button" data-dismiss="modal" aria-label="Close">
              <span class="icon" aria-hidden="true"><span class="far fa-times"></span></span>
            </button>
          </div>

          <div class="modal-body modal-box__body">

            {{!-- Use {{#content "body"}} by default in your components to pass body content
                  into 'modal-body-section' partial through 'this' context --}}
            {{!-- Use {{#content "sections"}} in case you need to separate blocks in body,
                  and manually insert needed number of 'modal-body-section' partials in your components --}}

            {{#block "sections"}}
              {{> modal-body-section this}}
            {{/block}}

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
