<EmberWormhole @to="modal-wormhole">
  <div class="{{this.modalClass}} {{if this.isActive 'is-active'}}" aria-modal="true" data-test-modal-div>
    <div class="modal-background" role="button" {{on "click" @onClose}} data-test-modal-background={{@title}}></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <h2 class="modal-card-title title is-5" data-test-modal-title>
          {{#if this.glyph}}
            <Icon
              class={{this.glyph.glyphClass}}
              aria-hidden="true"
              @name={{this.glyph.glyph}}
              data-test-modal-glyph={{this.glyph.glyph}}
            />
          {{/if}}
          <span class={{if this.glyph "has-left-padding-xs"}}>{{@title}}</span>
        </h2>
        {{#if this.showCloseButton}}
          <button
            type="button"
            class="icon-button has-text-grey"
            aria-label="close"
            {{on "click" @onClose}}
            data-test-modal-close-button
          >
            <Icon @name="x-circle" class="close-icon" />
          </button>
        {{/if}}
      </header>
      {{yield}}
    </div>
  </div>
</EmberWormhole>