<div class="col-sm-12 col-lg-6">
  <form name="rbdForm"
        class="form-horizontal"
        #formDir="ngForm"
        [formGroup]="rbdForm"
        novalidate>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 i18n="form title|Example: Create Pool@@formTitle"
            class="panel-title">{{ action | titlecase }} {{ resource | upperFirst }}</h3>
      </div>
      <div class="panel-body">

        <!-- Parent -->
        <div class="form-group"
             *ngIf="rbdForm.getValue('parent')">
          <label i18n
                 class="control-label col-sm-3"
                 for="name">{{ action | titlecase }} from</label>
          <div class="col-sm-9">
            <input class="form-control"
                   type="text"
                   id="parent"
                   name="parent"
                   formControlName="parent">
            <hr>
          </div>
        </div>

        <!-- Name -->
        <div class="form-group"
             [ngClass]="{'has-error': rbdForm.showError('name', formDir)}">
          <label class="control-label col-sm-3"
                 for="name">
            <ng-container i18n>Name</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <input class="form-control"
                   type="text"
                   placeholder="Name..."
                   id="name"
                   name="name"
                   formControlName="name"
                   autofocus>
            <span class="help-block"
                  *ngIf="rbdForm.showError('name', formDir, 'required')">
              <ng-container i18n>This field is required.</ng-container>
            </span>
            <span class="help-block"
                  *ngIf="rbdForm.showError('name', formDir, 'pattern')">
              <ng-container i18n>'/' and '@' are not allowed.</ng-container>
            </span>
          </div>
        </div>

        <!-- Pool -->
        <div class="form-group"
             [ngClass]="{'has-error': rbdForm.showError('pool', formDir)}"
             (change)="onPoolChange($event.target.value)">
          <label class="control-label col-sm-3"
                 for="pool">
            Pool
            <span class="required"
                  *ngIf="mode !== 'editing'"></span>
          </label>
          <div class="col-sm-9">
            <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"
                    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="help-block"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- Use a dedicated pool -->
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-9">
            <div class="checkbox checkbox-primary">
              <input type="checkbox"
                     id="useDataPool"
                     name="useDataPool"
                     formControlName="useDataPool"
                     (change)="onUseDataPoolChange()">
              <label i18n
                     for="useDataPool">Use a dedicated data pool</label>
            </div>
          </div>
        </div>

        <!-- Data Pool -->
        <div class="form-group"
             [ngClass]="{'has-error': rbdForm.showError('dataPool', formDir)}"
             *ngIf="rbdForm.getValue('useDataPool')">
          <label class="control-label col-sm-3"
                 for="dataPool">
            <ng-container i18n>Data pool</ng-container>
            <span class="required"
                  *ngIf="mode !== 'editing'"></span>
            <cd-helper i18n-html
                       html="Dedicated pool that stores the object-data of the RBD.">
            </cd-helper>
          </label>
          <div class="col-sm-9">
            <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"
                    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="help-block"
                  *ngIf="rbdForm.showError('dataPool', formDir, 'required')"
                  i18n>This field is required.</span>
          </div>
        </div>

        <!-- Size -->
        <div class="form-group"
             [ngClass]="{'has-error': rbdForm.showError('size', formDir)}">
          <label class="control-label col-sm-3"
                 for="size">
            <ng-container i18n>Size</ng-container>
            <span class="required"></span>
          </label>
          <div class="col-sm-9">
            <input id="size"
                   name="size"
                   class="form-control"
                   type="text"
                   formControlName="size"
                   i18n-placeholder
                   placeholder="e.g., 10GiB"
                   defaultUnit="GiB"
                   cdDimlessBinary>
            <span class="help-block"
                  *ngIf="rbdForm.showError('size', formDir, 'required')"
                  i18n>This field is required.</span>
            <span class="help-block"
                  *ngIf="rbdForm.showError('size', formDir, 'invalidSizeObject')"
                  i18n>You have to increase the size.</span>
          </div>
        </div>

        <!-- Features -->
        <div class="form-group"
             [ngClass]="{'has-error': (formDir.submitted || featuresFormGroups.dirty) && featuresFormGroups.invalid}"
             formGroupName="features">
          <label i18n
                 class="col-sm-3 control-label"
                 for="features">Features</label>
          <div class="col-sm-9">
            <div class="checkbox checkbox-primary"
                 *ngFor="let feature of featuresList">
              <input type="checkbox"
                     id="{{ feature.key }}"
                     name="{{ feature.key }}"
                     formControlName="{{ feature.key }}">
              <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="pull-right margin-right-md"
               (click)="advancedEnabled = true"
               *ngIf="!advancedEnabled"
               i18n>Advanced...</a>
          </div>
        </div>
        <div [hidden]="!advancedEnabled">

          <h2 i18n
              class="page-header">Advanced</h2>

          <div class="section">
            <h3 class="page-header" i18n>Striping</h3>

            <!-- Object Size -->
            <div class="form-group"
                 [ngClass]="{'has-error': rbdForm.showError('obj_size', formDir)}">
              <label i18n
                     class="control-label col-sm-3"
                     for="size">Object size</label>
              <div class="col-sm-9">
                <select id="obj_size"
                        name="obj_size"
                        class="form-control"
                        formControlName="obj_size">
                  <option *ngFor="let objectSize of objectSizes"
                          [value]="objectSize">{{ objectSize }}</option>
                </select>
              </div>
            </div>

            <!-- Stripe Unit -->
            <div class="form-group"
                 [ngClass]="{'has-error': rbdForm.showError('stripingUnit', formDir)}">
              <label class="control-label col-sm-3"
                     for="stripingUnit">
                <span i18n>Stripe unit</span>
                <span class="required"
                      *ngIf="rbdForm.getValue('stripingCount')">
              </span>
              </label>
              <div class="col-sm-9">
                <select id="stripingUnit"
                        name="stripingUnit"
                        class="form-control"
                        formControlName="stripingUnit">
                  <option i18n
                          [ngValue]="null">-- Select stripe unit --</option>
                  <option *ngFor="let objectSize of objectSizes"
                          [value]="objectSize">{{ objectSize }}</option>
                </select>
                <span class="help-block"
                      *ngIf="rbdForm.showError('stripingUnit', formDir, 'required')"
                      i18n>This field is required because stripe count is defined!</span>
                <span class="help-block"
                      *ngIf="rbdForm.showError('stripingUnit', formDir, 'invalidStripingUnit')"
                      i18n>Stripe unit is greater than object size.</span>
              </div>
            </div>

            <!-- Stripe Count -->
            <div class="form-group"
                 [ngClass]="{'has-error': rbdForm.showError('stripingCount', formDir)}">
              <label class="control-label col-sm-3"
                     for="stripingCount">
                <span i18n>Stripe count</span>
                <span class="required"
                      *ngIf="rbdForm.getValue('stripingUnit')">
              </span>
              </label>
              <div class="col-sm-9">
                <input id="stripingCount"
                       name="stripingCount"
                       formControlName="stripingCount"
                       class="form-control"
                       type="number">
                <span class="help-block"
                      *ngIf="rbdForm.showError('stripingCount', formDir, 'required')"
                      i18n>This field is required because stripe unit is defined!</span>
                <span class="help-block"
                      *ngIf="rbdForm.showError('stripingCount', formDir, 'min')"
                      i18n>Stripe count must be greater than 0.</span>
              </div>
            </div>
          </div>

          <div class="section">
            <cd-rbd-configuration-form [form]="rbdForm"
                                       [initializeData]="initializeConfigData"
                                       (changes)="getDirtyConfigurationValues = $event"></cd-rbd-configuration-form>
          </div>

        </div>

      </div>
      <div class="panel-footer">
        <div class="button-group text-right">
          <cd-submit-button
            [form]="formDir"
            (submitAction)="submit()"
            i18n="form action button|Example: Create Pool@@formActionButton"
            type="button">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
          <cd-back-button></cd-back-button>
        </div>
      </div>
    </div>
  </form>
</div>
