<div
  role="alertdialog"
  class="sky-inline-delete sky-inline-delete-{{ type }}"
  [@inlineDeleteAnimation]="animationState"
  [attr.aria-describedby]="assistiveTextId"
  [attr.aria-label]="'skyux_inline_delete_confirm_deletion' | skyLibResources"
  (@inlineDeleteAnimation.done)="onAnimationDone($event)"
>
  <span class="sky-inline-delete-assistive-text" [id]="assistiveTextId">
    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}
  </span>
  <sky-wait class="sky-inline-delete-wait" [isWaiting]="pending" />
  <div class="sky-inline-delete-content">
    <div class="sky-inline-delete-content-animation-container">
      <button
        #delete
        class="sky-btn sky-btn-danger sky-inline-delete-button"
        type="button"
        (click)="onDeleteClick()"
      >
        {{ 'skyux_inline_delete_delete' | skyLibResources }}
      </button>
      <button
        class="sky-btn sky-btn-default"
        type="button"
        (click)="onCancelClick()"
      >
        {{ 'skyux_inline_delete_cancel' | skyLibResources }}
      </button>
    </div>
  </div>
</div>
