<cds-modal size="sm"
           [open]="open"
           (overlaySelected)="closeModal()">
  <cds-modal-header (closeSelect)="closeModal()">
    <ng-container *ngTemplateOutlet="deletionHeading"></ng-container>
  </cds-modal-header>

  <section cdsModalContent>
    <form name="deletionForm"
          #formDir="ngForm"
          [formGroup]="deletionForm"
          novalidate>
      <cd-alert-panel *ngIf="infoMessage"
                      type="info"
                      spacingClass="cds-mb-3"
                      i18n>
        <p>{{ infoMessage }}</p>
      </cd-alert-panel>
      <ng-container *ngTemplateOutlet="bodyTemplate; context: bodyContext"></ng-container>
      <div class="question">
        <span *ngIf="itemNames; else noNames">
          <ng-container *ngIf="itemNames.length === 1; else manyNames">
            <p *ngIf="impact == impactEnum.medium"
               i18n>Are you sure that you want to {{ actionDescription | lowercase }} <strong>{{ itemNames[0] }}</strong>?</p>
          </ng-container>
          <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 *ngIf="impact == impactEnum.medium"
             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-item">
          <ng-container *ngIf="impact == impactEnum.medium; else highImpactDeletion">
            <cds-checkbox id="confirmation"
                          formControlName="confirmation"
                          autofocus
                          [required]="true"
                          modal-primary-focus
                          ariaLabel="confirmation"
                          i18n>Yes, I am sure.</cds-checkbox>
          </ng-container>
          <ng-template #highImpactDeletion>
            <p class="cds--type-body-01">
            @if (bodyContext?.deletionMessage) {
            <span [innerHTML]="bodyContext.deletionMessage"></span>
            } @else {
            <ng-container i18n>Deleting <strong>{{ itemNames[0] }}</strong> will remove all associated {{itemDescription}}.This action cannot be undone.</ng-container>
            }
            </p>
            <ng-template #labelTemplate>
              <span i18n
                    class="cds--type-label-01">Type <strong>{{ itemNames[0] }}</strong> to confirm (required)</span>
            </ng-template>
            <cds-text-label [labelTemplate]="labelTemplate"
                            labelInputID="resource_name"
                            [cdRequiredField]="'Type ' + itemNames[0] + ' to confirm'"
                            [invalid]="!deletionForm.controls.confirmInput.valid && deletionForm.controls.confirmInput.touched"
                            [invalidText]="ResourceError"
                            [disabled]="deletionForm.controls.confirmInput.disabled">
              <input cdsText
                     type="text"
                     [placeholder]="'Name of resource'"
                     id="resource_name"
                     formControlName="confirmInput"
                     [attr.disabled]="deletionForm.controls.confirmInput.disabled ? true : null"
                     i18n-placeholder
                     autofocus/>
            </cds-text-label>
            <ng-template #ResourceError>
              <span *ngIf="deletionForm.controls.confirmInput.hasError('required')"
                    class="invalid-feedback">
                <ng-container i18n>This field is required.</ng-container>
              </span>
              <span *ngIf="deletionForm.controls.confirmInput.hasError('matchResource')"
                    class="invalid-feedback">
                <ng-container i18n>Enter the correct resource name.</ng-container>
              </span>
            </ng-template>
          </ng-template>
        </div>
      </div>
    </form>
  </section>
  <cd-form-button-panel (submitActionEvent)="callSubmitAction()"
                        (backActionEvent)="backAction ? callBackAction() : hideModal()"
                        [form]="deletionForm"
                        [submitText]="(actionDescription | titlecase) + ' ' + itemDescription"
                        [modalForm]="true"
                        [disabled]="(submitDisabled$ | async) || deletionForm.disabled || (impact === impactEnum.high ? !deletionForm.controls.confirmInput.value : !deletionForm.controls.confirmation.value)"
                        [submitBtnType]="(actionDescription === 'delete' || actionDescription === 'remove') ? 'danger' : 'primary'"></cd-form-button-panel>

</cds-modal>
<ng-template #deletionHeading>
  @if (impact === impactEnum.high) {
  <h2 cdsModalHeaderLabel
      i18n>
      {{(actionDescription | titlecase) + ' ' + itemDescription}}
  </h2>
  <h2 class="cds--type-heading-03"
      cdsModalHeaderHeading
      i18n>
    Confirm {{ actionDescription }}
  </h2>
  } @else {
  <h3 cdsModalHeaderHeading
      i18n>
      {{(actionDescription | titlecase) + ' ' + itemDescription}}
  </h3>
  }
</ng-template>
