text: <div class="cd-col-form"
       *cdFormLoading="loading">
    <form name="rbdForm"
          #formDir="ngForm"
          [formGroup]="rbdForm"
          novalidate>
      <div class="card">
        <div i18n="form title|Example: Create Pool@@formTitle"
             class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>
        <div class="card-body">
  
          <!-- Parent -->
          <div class="form-group row"
               *ngIf="rbdForm.getValue('parent')">
            <label i18n
                   class="cd-col-form-label"
                   for="name">{{ action | titlecase }} from</label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="text"
                     id="parent"
                     name="parent"
                     formControlName="parent">
              <hr>
            </div>
          </div>
  
          <!-- Name -->
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="name"
                   i18n>Name</label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="text"
                     placeholder="Name..."
                     id="name"
                     name="name"
                     formControlName="name"
                     autofocus>
              <span class="invalid-feedback"
                    *ngIf="rbdForm.showError('name', formDir, 'required')">
                <ng-container i18n>This field is required.</ng-container>
              </span>
              <span class="invalid-feedback"
                    *ngIf="rbdForm.showError('name', formDir, 'pattern')">
                <ng-container i18n>'/' and '@' are not allowed.</ng-container>
              </span>
            </div>
          </div>
  
          <!-- Pool -->
          <div class="form-group row"
               (change)="onPoolChange($event.target.value)">
            <label class="cd-col-form-label"
                   [ngClass]="{'required': mode !== 'editing'}"
                   for="pool"
                   i18n>Pool</label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="text"
                     placeholder="Pool name..."
                     id="pool"
                     name="pool"
                     formControlName="pool"
                     *ngIf="mode === 'editing' || !poolPermission.read">
              <select id="pool"
                      name="pool"
                      class="form-control custom-select"
                      formControlName="pool"
                      *ngIf="mode !== 'editing' && poolPermission.read">
                <option *ngIf="pools === null"
                        [ngValue]="null"
                        i18n>Loading...</option>
                <option *ngIf="pools !== null && pools.length === 0"
                        [ngValue]="null"
                        i18n>-- No rbd pools available --</option>
                <option *ngIf="pools !== null && pools.length > 0"
                        [ngValue]="null"
                        i18n>-- Select a pool --</option>
                <option *ngFor="let pool of pools"
                        [value]="pool.pool_name">{{ pool.pool_name }}</option>
              </select>
              <span *ngIf="rbdForm.showError('pool', formDir, 'required')"
                    class="invalid-feedback"
                    i18n>This field is required.</span>
            </div>
          </div>
  
          <!-- Namespace -->
          <div class="form-group row"
               *ngIf="mode !== 'editing' && rbdForm.getValue('pool') && namespaces === null">
            <div class="cd-col-form-offset">
              <i [ngClass]="[icons.spinner, icons.spin]"></i>
            </div>
          </div>
          <div class="form-group row"
               *ngIf="(mode === 'editing' && rbdForm.getValue('namespace')) || mode !== 'editing' && (namespaces && namespaces.length > 0 || !poolPermission.read)">
            <label class="cd-col-form-label"
                   for="pool">
              Namespace
            </label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="text"
                     placeholder="Namespace..."
                     id="namespace"
                     name="namespace"
                     formControlName="namespace"
                     *ngIf="mode === 'editing' || !poolPermission.read">
              <select id="namespace"
                      name="namespace"
                      class="form-control custom-select"
                      formControlName="namespace"
                      *ngIf="mode !== 'editing' && poolPermission.read">
                <option *ngIf="pools === null"
                        [ngValue]="null"
                        i18n>Loading...</option>
                <option *ngIf="pools !== null && pools.length === 0"
                        [ngValue]="null"
                        i18n>-- No namespaces available --</option>
                <option *ngIf="pools !== null && pools.length > 0"
                        [ngValue]="null"
                        i18n>-- Select a namespace --</option>
                <option *ngFor="let namespace of namespaces"
                        [value]="namespace">{{ namespace }}</option>
              </select>
            </div>
          </div>
  
          <!-- Use a dedicated pool -->
          <div class="form-group row">
            <div class="cd-col-form-offset">
              <div class="custom-control custom-checkbox">
                <input type="checkbox"
                       class="custom-control-input"
                       id="useDataPool"
                       name="useDataPool"
                       formControlName="useDataPool"
                       (change)="onUseDataPoolChange()">
                <label class="custom-control-label"
                       for="useDataPool"
                       i18n>Use a dedicated data pool</label>
              </div>
            </div>
          </div>
  
          <!-- Data Pool -->
          <div class="form-group row"
               *ngIf="rbdForm.getValue('useDataPool')">
            <label class="cd-col-form-label"
                   for="dataPool">
              <span [ngClass]="{'required': mode !== 'editing'}"
                    i18n>Data pool</span>
              <cd-helper i18n-html
                         html="Dedicated pool that stores the object-data of the RBD.">
              </cd-helper>
            </label>
            <div class="cd-col-form-input">
              <input class="form-control"
                     type="text"
                     placeholder="Data pool name..."
                     id="dataPool"
                     name="dataPool"
                     formControlName="dataPool"
                     *ngIf="mode === 'editing' || !poolPermission.read">
              <select id="dataPool"
                      name="dataPool"
                      class="form-control custom-select"
                      formControlName="dataPool"
                      (change)="onDataPoolChange($event.target.value)"
                      *ngIf="mode !== 'editing' && poolPermission.read">
                <option *ngIf="dataPools === null"
                        [ngValue]="null"
                        i18n>Loading...</option>
                <option *ngIf="dataPools !== null && dataPools.length === 0"
                        [ngValue]="null"
                        i18n>-- No data pools available --</option>
                <option *ngIf="dataPools !== null && dataPools.length > 0"
                        [ngValue]="null">-- Select a data pool --
                </option>
                <option *ngFor="let dataPool of dataPools"
                        [value]="dataPool.pool_name">{{ dataPool.pool_name }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="rbdForm.showError('dataPool', formDir, 'required')"
                    i18n>This field is required.</span>
            </div>
          </div>
  
          <!-- Size -->
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="size"
                   i18n>Size</label>
            <div class="cd-col-form-input">
              <input id="size"
                     name="size"
                     class="form-control"
                     type="text"
                     formControlName="size"
                     i18n-placeholder
                     placeholder="e.g., 10GiB"
                     defaultUnit="GiB"
                     cdDimlessBinary>
              <span class="invalid-feedback"
                    *ngIf="rbdForm.showError('size', formDir, 'required')"
                    i18n>This field is required.</span>
              <span class="invalid-feedback"
                    *ngIf="rbdForm.showError('size', formDir, 'invalidSizeObject')"
                    i18n>You have to increase the size.</span>
            </div>
          </div>
  
          <!-- Features -->
          <div class="form-group row"
               formGroupName="features">
            <label i18n
                   class="cd-col-form-label"
                   for="features">Features</label>
            <div class="cd-col-form-input">
              <div class="custom-control custom-checkbox"
                   *ngFor="let feature of featuresList">
                <input type="checkbox"
                       class="custom-control-input"
                       id="{{ feature.key }}"
                       name="{{ feature.key }}"
                       formControlName="{{ feature.key }}">
                <label class="custom-control-label"
                       for="{{ feature.key }}">{{ feature.desc }}</label>
                <cd-helper *ngIf="feature.helperHtml"
                           html="{{ feature.helperHtml }}">
                </cd-helper>
              </div>
            </div>
          </div>
  
          <!-- Advanced -->
          <div class="row">
            <div class="col-sm-12">
              <a class="float-right margin-right-md"
                 (click)="advancedEnabled = true; false"
                 *ngIf="!advancedEnabled"
                 href=""
                 i18n>Advanced...</a>
            </div>
          </div>
  
          <div [hidden]="!advancedEnabled">
  
            <legend class="cd-header"
                    i18n>Advanced</legend>
  
            <div class="col-md-12">
              <h4 class="cd-header"
                  i18n>Striping</h4>
  
              <!-- Object Size -->
              <div class="form-group row">
                <label i18n
                       class="cd-col-form-label"
                       for="size">Object size</label>
                <div class="cd-col-form-input">
                  <select id="obj_size"
                          name="obj_size"
                          class="form-control custom-select"
                          formControlName="obj_size">
                    <option *ngFor="let objectSize of objectSizes"
                            [value]="objectSize">{{ objectSize }}</option>
                  </select>
                </div>
              </div>
  
              <!-- stripingUnit -->
              <div class="form-group row">
                <label class="cd-col-form-label"
                       [ngClass]="{'required': rbdForm.getValue('stripingCount')}"
                       for="stripingUnit"
                       i18n>Stripe unit</label>
                <div class="cd-col-form-input">
                  <select id="stripingUnit"
                          name="stripingUnit"
                          class="form-control custom-select"
                          formControlName="stripingUnit">
                    <option i18n
                            [ngValue]="null">-- Select stripe unit --</option>
                    <option *ngFor="let objectSize of objectSizes"
                            [value]="objectSize">{{ objectSize }}</option>
                  </select>
                  <span class="invalid-feedback"
                        *ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
                        i18n>This field is required because stripe count is defined!</span>
                  <span class="invalid-feedback"
                        *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
                        i18n>Stripe unit is greater than object size.</span>
                </div>
              </div>
  
              <!-- Stripe Count -->
              <div class="form-group row">
                <label class="cd-col-form-label"
                       [ngClass]="{'required': rbdForm.getValue('stripingUnit')}"
                       for="stripingCount"
                       i18n>Stripe count</label>
                <div class="cd-col-form-input">
                  <input id="stripingCount"
                         name="stripingCount"
                         formControlName="stripingCount"
                         class="form-control"
                         type="number">
                  <span class="invalid-feedback"
                        *ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
                        i18n>This field is required because stripe unit is defined!</span>
                  <span class="invalid-feedback"
                        *ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
                        i18n>Stripe count must be greater than 0.</span>
                </div>
              </div>
            </div>
  
            <cd-rbd-configuration-form [form]="rbdForm"
                                       [initializeData]="initializeConfigData"
                                       (changes)="getDirtyConfigurationValues = $event"></cd-rbd-configuration-form>
          </div>
  
        </div>
        <div class="card-footer">
          <div class="text-right">
            <cd-submit-button (submitAction)="submit()"
                              i18n="form action button|Example: Create Pool@@formActionButton"
                              [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
            <cd-back-button></cd-back-button>
          </div>
        </div>
      </div>
    </form>
  </div>
  