<div class="form-item">
  <legend class="cds--label"
          i18n>Clients</legend>

  <div [formGroup]="form"
       #formDir="ngForm">
    <span *ngIf="form.get('clients').value.length === 0"
          class="no-border text-muted">
      <span class="form-text text-muted"
            i18n>Any client can access</span>
    </span>

    <ng-container formArrayName="clients">
      <div *ngFor="let item of clientsFormArray.controls; let index = index; trackBy: trackByFn">
        <div [formGroup]="item">
          <h6>
            Client {{ (index + 1) }}
            <cds-icon-button kind="ghost"
                             size="md"
                             class="float-end"
                             (click)="removeClient(index)"
                             data-testid="remove_client"
                             data-toggle="button"
                             title="Remove Client">
              <svg cdsIcon="close"
                   size="32"
                   class="cds--btn__icon"></svg>
            </cds-icon-button>
          </h6>

          <div>
            <!-- Addresses -->
            <div class="form-item">
              <cds-text-label for="addresses"
                              i18n
                              cdRequiredField="Addresses"
                              [invalid]="!item.controls['addresses'].valid && (item.controls['addresses'].dirty)"
                              [invalidText]="addressesError"
                              i18n-invalidText>Addresses
                <input cdsText
                       name="addresses"
                       id="addresses"
                       formControlName="addresses"
                       placeholder="e.g. 192.168.0.10, 192.168.1.0/8"
                       [invalid]="!item.controls['addresses'].valid && (item.controls['addresses'].dirty)">
              </cds-text-label>
              <ng-template #addressesError>
                <span class="invalid-feedback">
                  <span *ngIf="showError(index, 'addresses', formDir, 'required')"
                        i18n>This field is required.</span>

                  <span *ngIf="showError(index, 'addresses', formDir, 'invalidAddress')">
                    <ng-container i18n>Must contain one or more comma-separated valid addresses.</ng-container>
                    <br>
                    <ng-container i18n>For example:</ng-container> 192.168.0.10, 192.168.1.0/8
                  </span>
                </span>
              </ng-template>
            </div>

            <!-- Access Type-->
            <div class="form-item">
              <cds-select label="Access Type"
                          for="access_type"
                          formControlName="access_type"
                          name="access_type"
                          id="access_type"
                          [helperText]="accessTypeHelper"
                          i18n>Access Type
                <option value="">No Access Type</option>
                <option *ngFor="let item of nfsAccessType"
                        [value]="item.value">{{ item.value }}</option>
              </cds-select>
              <ng-template #accessTypeHelper>
                <span *ngIf="getValue(index, 'access_type')">
                  {{ getAccessTypeHelp(index) }}
                </span>
              </ng-template>
            </div>

            <!-- Squash -->
            <div class="form-group row">
              <cds-select label="Squash"
                          for="squash"
                          formControlName="squash"
                          name="squash"
                          id="squash"
                          [helperText]="squashHelperTpl"
                          i18n>Squash
                <option value="">{{ getNoSquashDescr() }}</option>
                <option *ngFor="let squash of nfsSquash"
                        [value]="squash">{{ squash }}</option>
              </cds-select>
            </div>
          </div>
        </div>
      </div>
    </ng-container>

    <div cdsRow>
      <div cdsCol>
        <button cdsButton="tertiary"
                type="button"
                (click)="addClient()"
                name="add_client">
          <ng-container i18n>Add clients</ng-container>
          <svg cdsIcon="add"
               size="32"
               class="cds--btn__icon"></svg>
        </button>
      </div>
    </div>
  </div>
</div>
