<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="description"></ng-container>
        <p>
          <ng-container i18n>
            To confirm the deletion, enter
          </ng-container>
          <kbd>{{ pattern }}</kbd>
          <ng-container i18n>
            and click on
          </ng-container>
          <kbd>
            <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
          </kbd>.
        </p>
        <div class="form-group"
             [ngClass]="{'has-error': invalidControl(formDir.submitted)}">
          <input type="text"
                 class="form-control"
                 name="confirmation"
                 id="confirmation"
                 [placeholder]="pattern"
                 [pattern]="pattern"
                 autocomplete="off"
                 (keyup)="updateConfirmation($event)"
                 formControlName="confirmation"
                 autofocus>
          <span class="help-block"
                *ngIf="invalidControl(formDir.submitted,'required')"
                i18n>
          This field is required.
        </span>
          <span class="help-block"
                *ngIf="invalidControl(formDir.submitted, 'pattern')">
          '{{ confirmation.value }}'
          <span i18n>doesn't match</span>
          '{{ pattern }}'.
        </span>
        </div>
      </div>
      <div class="modal-footer">
        <cd-submit-button #submitButton
                          [form]="deletionForm"
                          (submitAction)="deletionCall()">
          <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
        </cd-submit-button>
        <button class="btn btn-link btn-sm"
                (click)="hideModal()"
                i18n>
          Cancel
        </button>
      </div>
    </form>
  </ng-container>
</cd-modal>

<ng-template #deletionHeading>
  <ng-container i18n>
    Delete
  </ng-container>
  {{ metaType }}
</ng-template>
