<cds-modal size="lg"
           [open]="open"
           [hasScrollingContent]="true"
           (overlaySelected)="closeModal()">
  <cds-modal-header (closeSelect)="closeModal()">
    <h3 cdsModalHeaderHeading
        i18n>{{ action | titlecase }} {{ resource }}</h3>
  </cds-modal-header>
  <form name="multisiteZoneForm"
        #formDir="ngForm"
        [formGroup]="multisiteZoneForm"
        novalidate>
    <div cdsModalContent
         class="modal-wrapper scroll-overflow">
      <div class="form-item">
        <cds-select
          formControlName="selectedZonegroup"
          [disabled]="action === actionLabels.EDIT ? true : null"
          (change)="onZoneGroupChange($event.target.value)"
          label="Zone group"
          i18n
          >Zone group
          <option
            *ngFor="let zonegroupName of zonegroupList"
            [value]="zonegroupName.name"
            [selected]="zonegroupName.name === multisiteZoneForm.getValue('selectedZonegroup')"
          >
            {{ zonegroupName.name }}
          </option>
        </cds-select>
      </div>
      <div class="form-item">
        <cds-text-label
          labelInputID="zoneName"
          [invalid]="
            multisiteZoneForm.controls.zoneName.invalid && multisiteZoneForm.controls.zoneName.dirty
          "
          [invalidText]="zoneNameError"
          cdRequiredField="Zone name"
          i18n
          >Zone name
          <input
            cdsText
            type="text"
            formControlName="zoneName"
            [invalid]="
              multisiteZoneForm.controls.zoneName.invalid &&
              multisiteZoneForm.controls.zoneName.dirty
            "
          />
        </cds-text-label>
        <ng-template #zoneNameError>
          <span
            class="invalid-feedback"
            *ngIf="multisiteZoneForm.showError('zoneName', formDir, 'required')"
            i18n
            >This field is required.</span
          >
          <span
            class="invalid-feedback"
            *ngIf="multisiteZoneForm.showError('zoneName', formDir, 'uniqueName')"
            i18n
            >The chosen zone name is already in use.</span
          >
        </ng-template>
      </div>

      <div class="form-item">
        <cds-checkbox
          id="default_zone"
          formControlName="default_zone"
          cdOptionalField="Mark as default zone"
          i18n
          [disabled]="action === actionLabels.EDIT ? true : null"
          >Mark as default zone
          <cd-help-text *ngIf="disableDefault && action === actionLabels.CREATE">Default zone can only exist in a default zone group.
          </cd-help-text>
          <cd-help-text *ngIf="isDefaultZone">
            <span>You cannot unset the default flag.</span>
          </cd-help-text>
          <cd-help-text *ngIf="action === actionLabels.EDIT && !isDefaultZone">
            <span
              >Please consult the&nbsp;<cd-doc section="rgw-multisite"></cd-doc>&nbsp;to follow the
              failover mechanism</span
            >
          </cd-help-text>
        </cds-checkbox>
      </div>
      <div class="form-item">
        <cds-checkbox
          id="master_zone"
          formControlName="master_zone"
          cdOptionalField="Master"
          [disabled]="action === actionLabels.EDIT ? true : null"
          i18n
          >Master
          <cd-help-text *ngIf="disableMaster">Master zone already exist for the selected zone group.
          </cd-help-text>
          <cd-help-text *ngIf="isMasterZone">
            <span>You cannot unset the master flag. </span>
          </cd-help-text>
          <cd-help-text *ngIf="action === actionLabels.EDIT && !isMasterZone">
            <span
              >Please consult the&nbsp;<a href="{{ docUrl }}">documentation</a>&nbsp;to follow the
              failover mechanism</span
            >
          </cd-help-text>
        </cds-checkbox>
      </div>
      <div class="form-item">
        <cds-text-label
          i18n
          [invalid]="
            multisiteZoneForm.showError('zone_endpoints', formDir, 'required') ||
            multisiteZoneForm.showError('zone_endpoints', formDir, 'invalidURL')
          "
          cdRequiredField="Endpoints"
          [invalidText]="
                            multisiteZoneForm.controls['zone_endpoints'].errors?.['required'] ? 'This field is required.' :
                            multisiteZoneForm.controls['zone_endpoints'].errors?.['invalidURL'] ? 'Please enter a valid URL.' : ''
                          "
          i18n-invalidText
          >Endpoints
          <input
            cdsText
            formControlName="zone_endpoints"
            placeholder="http://ceph-node-00.com:80"
            [invalid]="
              multisiteZoneForm.showError('zone_endpoints', formDir, 'required') ||
              multisiteZoneForm.showError('zone_endpoints', formDir, 'invalidURL')
            "
          />
        </cds-text-label>
      </div>

      <div class="form-item">
        <cds-password-label labelInputID="access_key"
                            [helperText]="AccessKeyText"
                            i18n>S3 access key
          <input
            cdsPassword
            type="password"
            id="access_key"
            formControlName="access_key"
            placeholder="DiPt4V7WWvy2njL1z6aC"
            i18n-placeholder
          />
        </cds-password-label>
      </div>
      <div class="form-item">
        <cds-password-label labelInputID="secret_key"
                            [helperText]="SecretKeyText"
                            i18n>S3 secret key
          <input
            cdsPassword
            type="password"
            id="secret_key"
            formControlName="secret_key"
            placeholder="xSZUdYky0bTctAdCEEW8ikhfBVKsBV5LFYL82vvh"
            i18n-placeholder
          />
        </cds-password-label>
      </div>
      <div *ngIf="action === actionLabels.EDIT">
        <legend class="cd-header"
                i18n>Placement Targets</legend>
        <div class="form-item">
          <cds-select
            formControlName="placementTarget"
            name="placementTarget"
            (change)="getZonePlacementData($event.target.value)"
            label="Placement targets"
            i18n
            >Placement targets

            <option
              *ngFor="let placement of placementTargets"
              [value]="placement.name"
              [selected]="placement.name === multisiteZoneForm.getValue('placementTarget')"
            >
              {{ placement.name }}
            </option>
          </cds-select>
        </div>
        <div class="form-item">
          <cds-select formControlName="placementDataPool"
                      label="Data pool"
                      i18n>Data pool

            <option
              *ngFor="let pool of poolList"
              [value]="pool.poolname"
              [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataPool')"
            >
              {{ pool.poolname }}
            </option>
          </cds-select>
        </div>
        <div class="form-item">
          <cds-select formControlName="placementIndexPool"
                      label="Index pool"
                      i18n>Index pool

            <option
              *ngFor="let pool of poolList"
              [value]="pool.poolname"
              [selected]="pool.poolname === multisiteZoneForm.getValue('placementIndexPool')"
            >
              {{ pool.poolname }}
            </option>
          </cds-select>
        </div>
        <div class="form-item">
          <cds-select formControlName="placementDataExtraPool"
                      label="Data extra pool"
                      i18n>Data extra pool
            <option
              *ngFor="let pool of poolList"
              [value]="pool.poolname"
              [selected]="pool.poolname === multisiteZoneForm.getValue('placementDataExtraPool')"
            >
              {{ pool.poolname }}
            </option>
          </cds-select>
        </div>

        <div>
          <legend class="cd-header"
                  i18n>Storage Classes</legend>
          <div class="form-item">
            <cds-select
              formControlName="storageClass"
              (change)="getStorageClassData($event.target.value)"
              label="Storage class"
              i18n
              >Storage class

              <option *ngFor="let storageClass of storageClassList"
                      [value]="storageClass.key">
                {{ storageClass.key }}
              </option>
            </cds-select>
          </div>
          <div class="form-item">
            <cds-select formControlName="storageDataPool"
                        label="Data pool"
                        i18n>Data pool
              <option
                *ngFor="let pool of poolList"
                [value]="pool.poolname"
                [selected]="pool.poolname === multisiteZoneForm.getValue('storageDataPool')"
              >
                {{ pool.poolname }}
              </option>
            </cds-select>
          </div>
          <div class="form-item">
            <cds-select formControlName="storageCompression"
                        label="Compression"
                        i18n>Compression
              <option *ngFor="let compression of compressionTypes"
                      [value]="compression">
                {{ compression }}
              </option>
            </cds-select>
          </div>
        </div>
      </div>
    </div>
    <cd-form-button-panel
      (submitActionEvent)="submit()"
      [form]="multisiteZoneForm"
      [submitText]="(action | titlecase) + ' ' + resource"
      [modalForm]="true"
    >
    </cd-form-button-panel>
  </form>
</cds-modal>
