<cd-modal #modal
          [modalRef]="modalRef">
  <ng-container class="modal-title">
    <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
  </ng-container>

  <ng-container class="modal-content">
    <form name="deletionForm"
          #formDir="ngForm"
          [formGroup]="deletionForm"
          novalidate>
      <div class="modal-body">
        <ng-container *ngTemplateOutlet="bodyTemplate; context: bodyContext"></ng-container>
        <div class="question">
          <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected {{ itemDescription }}?</p>
          <div class="form-group"
               [ngClass]="{'has-error': deletionForm.showError('confirmation', formDir)}">
            <div class="checkbox checkbox-primary">
              <input type="checkbox"
                     name="confirmation"
                     id="confirmation"
                     formControlName="confirmation"
                     autofocus>
              <label i18n
                     for="confirmation">Yes, I am sure.</label>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <cd-submit-button #submitButton
                          [form]="deletionForm"
                          (submitAction)="callSubmitAction()">
          <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
        </cd-submit-button>
        <cd-back-button [back]="modalRef.hide"
                        name="Cancel"
                        i18n-name>
        </cd-back-button>
      </div>
    </form>
  </ng-container>
</cd-modal>

<ng-template #deletionHeading>
  {{ actionDescription | titlecase }} {{ itemDescription }}
</ng-template>
