import 15.2.5

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / shared / components / critical-confirmation-modal / critical-confirmation-modal.component.html

<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">
          <span *ngIf="itemNames; else noNames">
            <p *ngIf="itemNames.length === 1; else manyNames"
               i18n>Are you sure that you want to {{ actionDescription | lowercase }} <strong>{{ itemNames[0] }}</strong>?</p>
            <ng-template #manyNames>
              <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected items?</p>
              <ul>
                <li *ngFor="let itemName of itemNames"><strong>{{ itemName }}</strong></li>
              </ul>
            </ng-template >
          </span>
          <ng-template #noNames>
            <p i18n>Are you sure that you want to {{ actionDescription | lowercase }} the selected {{ itemDescription }}?</p>
          </ng-template>
          <ng-container *ngTemplateOutlet="childFormGroupTemplate; context:{form:deletionForm}"></ng-container>
          <div class="form-group">
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     name="confirmation"
                     id="confirmation"
                     formControlName="confirmation"
                     autofocus>
              <label class="custom-control-label"
                     for="confirmation"
                     i18n>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>