<div class="cd-col-form">
  <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="button-group 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>
