<cd-orchestrator-doc-panel *ngIf="!hasOrchestrator"></cd-orchestrator-doc-panel>

<div class="card"
     *cdFormLoading="loading">
  <div i18n="form title|Example: Create Pool@@formTitle"
       class="card-header"
       *ngIf="!hideTitle">{{ action | titlecase }} {{ resource | upperFirst }}</div>
  <div class="card-body ms-2">
    <form name="form"
          #formDir="ngForm"
          [formGroup]="form"
          novalidate>
      <cd-alert-panel *ngIf="availDevices?.length === 0"
                      type="warning"
                      class="mx-3"
                      i18n>
        <div cdsStack="vertical"
             [gap]="2">
          <span class="cds--type-heading-compact-01">No eligible devices found for OSD creation.</span>
          <span class="cds--type-body-compact-01">Physical disks may be present, but none meet the requirements (unused, unformatted, and not already configured by Ceph).</span>
        </div>
      </cd-alert-panel>
      <div class="accordion">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button"
                    type="button"
                    data-toggle="collapse"
                    aria-label="toggle deployment options"
                    [ngClass]="{collapsed: !simpleDeployment}"
                    (click)="emitDeploymentMode()"
                    i18n>Deployment Options</button>
          </h2>
        </div>
        <div class="accordion-collapse collapse"
             [ngClass]="{show: simpleDeployment}">
          <div class="accordion-body">
            <div class="pt-3 pb-3"
                 *ngFor="let optionName of optionNames">
              <div class="custom-control form-check custom-control-inline">
                <input class="form-check-input"
                       type="radio"
                       name="deploymentOption"
                       [id]="optionName"
                       [value]="optionName"
                       formControlName="deploymentOption"
                       (change)="emitDeploymentSelection()"
                       [attr.disabled]="!deploymentOptions?.options[optionName].available ? true : null">
                <label class="form-check-label"
                       [id]="'label_' + optionName"
                       [for]="optionName"
                       i18n>{{ deploymentOptions?.options[optionName].title }}
                       {{ deploymentOptions?.recommended_option === optionName ? "(Recommended)" : "" }}
                  <cd-helper>
                    <span>{{ deploymentOptions?.options[optionName].desc }}</span>
                  </cd-helper>
                </label>
              </div>
            </div>
            <!-- @TODO: Visualize the storage used on a chart -->
            <!-- <div class="pie-chart">
              <h4 class="text-center">Selected Capacity</h4>
              <h5 class="margin text-center">10 Hosts | 30 NVMes </h5>
              <div class="char-i-contain">
                <cd-health-pie [data]="data"
                               [config]="rawCapacityChartConfig"
                               [isBytesData]="true"
                               (prepareFn)="prepareRawUsage($event[0], $event[1])">
                </cd-health-pie>
              </div>
            </div> -->
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button"
                    type="button"
                    aria-label="toggle advanced mode"
                    [ngClass]="{collapsed: simpleDeployment}"
                    (click)="emitDeploymentMode()"
                    i18n>Advanced Mode</button>
          </h2>
        </div>
        <div class="accordion-collapse collapse"
             [ngClass]="{show: !simpleDeployment}">
          <div class="accordion-body">
            <div class="card-body">
              <fieldset>
                <cd-osd-devices-selection-groups #dataDeviceSelectionGroups
                                                 name="Primary"
                                                 type="data"
                                                 [availDevices]="availDevices"
                                                 [canSelect]="availDevices.length !== 0"
                                                 (selected)="onDevicesSelected($event)"
                                                 (cleared)="onDevicesCleared($event)">
                </cd-osd-devices-selection-groups>
              </fieldset>

              <!-- Shared devices -->
              <fieldset>
                <legend i18n>Shared devices</legend>

                <!-- WAL devices button and table -->
                <cd-osd-devices-selection-groups #walDeviceSelectionGroups
                                                 name="WAL"
                                                 type="wal"
                                                 [availDevices]="availDevices"
                                                 [canSelect]="dataDeviceSelectionGroups.devices.length !== 0"
                                                 (selected)="onDevicesSelected($event)"
                                                 (cleared)="onDevicesCleared($event)"
                                                 [hostname]="hostname">
                </cd-osd-devices-selection-groups>

                <!-- WAL slots -->
                <div class="form-group row"
                     *ngIf="walDeviceSelectionGroups.devices.length !== 0">
                  <label class="cd-col-form-label"
                         for="walSlots">
                    <ng-container i18n>WAL slots</ng-container>
                    <cd-helper>
                      <span i18n>How many OSDs per WAL device.</span>
                      <br>
                      <span i18n>Specify 0 to let Orchestrator backend decide it.</span>
                    </cd-helper>
                  </label>
                  <div class="cd-col-form-input">
                    <input class="form-control"
                           id="walSlots"
                           name="walSlots"
                           type="number"
                           min="0"
                           formControlName="walSlots">
                    <span class="invalid-feedback"
                          *ngIf="form.showError('walSlots', formDir, 'min')"
                          i18n>Value should be greater than or equal to 0</span>
                  </div>
                </div>

                <!-- DB devices button and table -->
                <cd-osd-devices-selection-groups #dbDeviceSelectionGroups
                                                 name="DB"
                                                 type="db"
                                                 [availDevices]="availDevices"
                                                 [canSelect]="dataDeviceSelectionGroups.devices.length !== 0"
                                                 (selected)="onDevicesSelected($event)"
                                                 (cleared)="onDevicesCleared($event)"
                                                 [hostname]="hostname">
                </cd-osd-devices-selection-groups>

                <!-- DB slots -->
                <div class="form-group row"
                     *ngIf="dbDeviceSelectionGroups.devices.length !== 0">
                  <label class="cd-col-form-label"
                         for="dbSlots">
                    <ng-container i18n>DB slots</ng-container>
                    <cd-helper>
                      <span i18n>How many OSDs per DB device.</span>
                      <br>
                      <span i18n>Specify 0 to let Orchestrator backend decide it.</span>
                    </cd-helper>
                  </label>
                  <div class="cd-col-form-input">
                    <input class="form-control"
                           id="dbSlots"
                           name="dbSlots"
                           type="number"
                           min="0"
                           formControlName="dbSlots">
                    <span class="invalid-feedback"
                          *ngIf="form.showError('dbSlots', formDir, 'min')"
                          i18n>Value should be greater than or equal to 0</span>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>

        <!-- Features -->
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button"
                    type="button"
                    data-toggle="collapse"
                    aria-label="features"
                    aria-expanded="true"
                    i18n>Features</button>
          </h2>
        </div>
        <div class="accordion-collapse collapse show">
          <div class="accordion-body">
            <div class="pt-3 pb-3"
                 formGroupName="features">
              <div class="custom-control custom-checkbox"
                   *ngFor="let feature of featureList">
                <input type="checkbox"
                       class="custom-control-input"
                       id="{{ feature.key }}"
                       name="{{ feature.key }}"
                       formControlName="{{ feature.key }}"
                       (change)="emitDeploymentSelection()">
                <label class="custom-control-label"
                       for="{{ feature.key }}">{{ feature.desc }}</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="card-footer"
       *ngIf="!hideSubmitBtn">
    <cd-form-button-panel #previewButtonPanel
                          (submitActionEvent)="submit()"
                          [form]="form"
                          [disabled]="dataDeviceSelectionGroups.devices.length === 0 && !simpleDeployment"
                          [submitText]="simpleDeployment ? 'Create OSDs' : actionLabels.PREVIEW"
                          wrappingClass="text-right"></cd-form-button-panel>
  </div>
</div>
