{{! alias the active notification on the service --}}
{{#let this.service.activeNotification as |notification|}}
  {{! Dialog Modals }}
  {{#if (and this.service.isShowingNotification (eq notification.type this.notificationType.Modal))}}
    <NotificationsConfirmDialog
      @dismissButtonText={{notification.props.dismissButtonText}}
      @confirmButtonText={{notification.props.confirmButtonText}}
      @toggleText={{notification.props.toggleText}}
      @onDialogToggle={{action notification.props.onDialogToggle target=this.service}}
      @didConfirm={{action "confirmModal" target=this.service}}
      @didClose={{action "dismissModal" target=this.service}} as |Dialog|
    >
      <Dialog.header @header={{notification.props.header}} />

      <Dialog.content @content={{notification.props.content}} />

      <Dialog.footer />
    </NotificationsConfirmDialog>
  {{/if}}


  <div class="notifications__toast-wrapper">
    {{! Toasts are hidden or show based on the flag, allows for css animation between states}}
    {{#let (if this.service.isShowingToast "--visible" "--hidden") as |classModifier|}}
      <NotificationsToast
        class={{concat "notifications__toast" classModifier}}
        @toast={{notification}}
        @onDismiss={{action this.service.dismissToast}}
        @onShowDetail={{action this.service.showContentDetail}}
      />
    {{/let}}
  </div>
{{/let}}