<div class="confirm-action" ...attributes>
  <BasicDropdown
    @horizontalPosition={{this.horizontalPosition}}
    @verticalPosition={{this.verticalPosition}}
    @onOpen={{this.toggleConfirm}}
    @onClose={{this.toggleConfirm}}
    as |d|
  >
    <d.Trigger
      @htmlTag="button"
      class={{concat @buttonClasses " popup-menu-trigger" (if d.isOpen " is-active")}}
      type="button"
      disabled={{this.disabled}}
      data-test-confirm-action-trigger="true"
    >
      {{yield}}
      {{#if (eq @buttonClasses "toolbar-link")}}
        <Chevron @direction={{if this.showConfirm "up" "down"}} data-test-confirm-action-chevron />
      {{/if}}
    </d.Trigger>
    <d.Content @defaultClass="popup-menu-content">
      <div class="box confirm-action-message">
        <div class="message is-highlight">
          <div class="message-title" data-test-confirm-action-title>
            <Icon @name="alert-triangle-fill" />
            {{this.confirmTitle}}
          </div>
          <p>
            {{this.confirmMessage}}
          </p>
        </div>
        <div class="confirm-action-options">
          <button
            type="button"
            disabled={{or this.disabled this.isRunning}}
            class="link is-destroy"
            data-test-confirm-button="true"
            {{on "click" (fn this.onConfirm d.actions)}}
          >
            {{#if this.isRunning}}
              <span class="loader is-inline-block"></span>
            {{else}}
              {{this.confirmButtonText}}
            {{/if}}
          </button>
          <button type="button" class="link" data-test-confirm-cancel-button="true" {{on "click" d.actions.close}}>
            {{this.cancelButtonText}}
          </button>
        </div>
      </div>
    </d.Content>
  </BasicDropdown>
</div>