<div data-test-alert-banner={{this.bannerType}}>
  <div class="columns is-mobile is-variable is-1">
    <div class="column is-narrow message-icon">
      <Icon class={{this.alertType.glyphClass}} aria-hidden="true" @name={{this.alertType.glyph}} />
    </div>
    {{#if @yieldWithoutColumn}}
      {{yield}}
    {{else}}
      <div class="column">
        <div class="message-title">
          {{or @title this.alertType.text}}
          {{#if @secondIconType}}
            <Icon class={{this.secondAlertType.glyphClass}} aria-hidden="true" @name={{this.secondAlertType.glyph}} />
          {{/if}}
          {{#if @progressBar}}
            <progress
              value={{this.progressBar.value}}
              max={{this.progressBar.max}}
              class="progress is-success is-medium is-inline-block"
            ></progress>
          {{/if}}
        </div>
        {{#if @message}}
          <p class="alert-banner-message-body">
            {{@message}}
          </p>
        {{/if}}
        {{#if (has-block)}}
          <p class="message-actions">
            {{yield}}
          </p>
        {{/if}}
      </div>
    {{/if}}
  </div>
</div>