<fieldset #cfgFormGroup
          [formGroup]="form.get('configuration')">
  <legend i18n>RBD Configuration</legend>

  <div *ngFor="let section of rbdConfigurationService.sections"
       class="col-12">
    <h4 class="cd-header">
      <span (click)="toggleSectionVisibility(section.class)"
            class="collapsible">
        {{ section.heading }} <i [ngClass]="!sectionVisibility[section.class] ? icons.addCircle : icons.minusCircle"
                                 aria-hidden="true"></i>
      </span>
    </h4>
    <div class="{{ section.class }}"
         [hidden]="!sectionVisibility[section.class]">
      <div class="form-group row"
           *ngFor="let option of section.options">
        <label class="cd-col-form-label"
               [for]="option.name">{{ option.displayName }}<cd-helper>{{ option.description }}</cd-helper></label>

        <div class="cd-col-form-input {{ section.heading }}">
          <div class="input-group">
            <ng-container [ngSwitch]="option.type">
              <ng-container *ngSwitchCase="configurationType.milliseconds">
                <input [id]="option.name"
                       [name]="option.name"
                       [formControlName]="option.name"
                       type="text"
                       class="form-control"
                       [ngDataReady]="ngDataReady"
                       cdMilliseconds>
              </ng-container>
              <ng-container *ngSwitchCase="configurationType.bps">
                <input [id]="option.name"
                       [name]="option.name"
                       [formControlName]="option.name"
                       type="text"
                       class="form-control"
                       defaultUnit="b"
                       [ngDataReady]="ngDataReady"
                       cdDimlessBinaryPerSecond>
              </ng-container>
              <ng-container *ngSwitchCase="configurationType.iops">
                <input [id]="option.name"
                       [name]="option.name"
                       [formControlName]="option.name"
                       type="text"
                       class="form-control"
                       [ngDataReady]="ngDataReady"
                       cdIops>
              </ng-container>
            </ng-container>
            <button class="btn btn-light"
                    type="button"
                    data-toggle="button"
                    [ngClass]="{'active': isDisabled(option.name)}"
                    title="Remove the local configuration value. The parent configuration value will be inherited and used instead."
                    i18n-title
                    (click)="reset(option.name)">
              <i [ngClass]="[icons.erase]"
                 aria-hidden="true"></i>
            </button>
          </div>
          <span i18n
                class="invalid-feedback"
                *ngIf="form.showError('configuration.' + option.name, cfgFormGroup, 'min')">The minimum value is 0</span>
        </div>
      </div>
    </div>
  </div>

</fieldset>
