<cds-modal size="md"
           [open]="open"
           (overalSelected)="closeModal()">

  <cds-modal-header (closeSelect)="closeModal()">
    <h3 cdsModalHeaderHeading
        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</h3>
  </cds-modal-header>

  <section cdsModalContent>
    <form name="snapshotForm"
          #formDir="ngForm"
          [formGroup]="snapshotForm"
          novalidate>
      <!-- Name -->
      <div class="form-item">
        <cds-text-label label="Name"
                        i18n-label
                        for="snapshotName"
                        i18n
                        cdRequiredField="Name"
                        [invalid]="snapshotForm.controls['snapshotName'].invalid && (snapshotForm.controls['snapshotName'].dirty)"
                        [invalidText]="snapshotError">
          <input cdsText
                 type="text"
                 placeholder="Snapshot name..."
                 id="snapshotName"
                 name="snapshotName"
                 formControlName="snapshotName"
                 [attr.disabled]="((mirroring === 'snapshot') ? true : null) && (snapshotForm.getValue('mirrorImageSnapshot') === true) ? true: null"
                 [invalid]="snapshotForm.controls['snapshotName'].invalid && (snapshotForm.controls['snapshotName'].dirty)"
                 autofocus>
          <span *ngIf="((mirroring === 'snapshot') ? true : null) && (snapshotForm.getValue('mirrorImageSnapshot') === true) ? true: null">
            Snapshot mode is enabled on image <b>{{ imageName }}</b>: snapshot names are auto generated</span>
        </cds-text-label>
        <ng-template #snapshotError>
          <span *ngIf="snapshotForm.showError('snapshotName', formDir, 'required')"
                class="invalid-feedback"
                i18n>This field is required.</span>
          <span *ngIf="snapshotForm.showError('snapshotName', formDir, 'pattern')"
                class="invalid-feedback"
                i18n>The snapshot name cannot start with "." and cannot contain "/" and "&#64;".</span>
        </ng-template>
      </div>

      <ng-container *ngIf="mirroring === 'snapshot'">
        <div class="form-item"
             *ngIf="peerConfigured$ | async as peerConfigured">
          <cds-checkbox id="mirrorImageSnapshot"
                        formControlName="mirrorImageSnapshot"
                        name="mirrorImageSnapshot"
                        (checkedChange)="onMirrorCheckBoxChange()"
                        [attr.disabled]="!peerConfigured.length > 0 ? true : null"
                        i18n>Mirror Image Snapshot
          </cds-checkbox>
        </div>
      </ng-container>
    </form>
  </section>
  <cd-form-button-panel (submitActionEvent)="submit()"
                        [form]="snapshotForm"
                        [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"
                        [modalForm]="true"></cd-form-button-panel>
</cds-modal>
