<div class="modal-outer-container">
  <div class="modal-middle-container">
    <div class="modal-inner-container">
      <PluginOutlet @name="above-modal-header" @connectorTagName="div" />
      <div class="modal-header {{this.headerClass}}">
        {{#if this.dismissable}}
          <DButton
            @icon="times"
            @action={{route-action "closeModal" "initiatedByCloseButton"}}
            @class="btn-flat modal-close close"
            @title="modal.close"
          />
        {{/if}}

        {{#if this.title}}
          <div class="title">
            <h3 id="discourse-modal-title">{{this.title}}</h3>

            {{#if this.subtitle}}
              <p class="subtitle">{{this.subtitle}}</p>
            {{/if}}
          </div>
        {{/if}}

        {{#if this.panels}}
          <ul class="modal-tabs">
            {{#each this.panels as |panel|}}
              <ModalTab
                @panel={{panel}}
                @panelsLength={{this.panels.length}}
                @selectedPanel={{this.selectedPanel}}
                @onSelectPanel={{this.onSelectPanel}}
              />
            {{/each}}
          </ul>
        {{/if}}
      </div>

      <div id="modal-alert" role="alert"></div>

      {{yield}}

      {{#each this.errors as |error|}}
        <div class="alert alert-error">
          <button
            type="button"
            class="close"
            data-dismiss="alert"
            aria-label={{i18n "modal.dismiss_error"}}
          >×</button>
          {{error}}
        </div>
      {{/each}}
    </div>
  </div>
</div>