<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>
</header>
{{yield}}
</div>
</EmberWormhole>