<ion-header>
  <ion-toolbar style="--background: var(--ion-color-toolbar-primary); color: var(--ion-title-color)">
    <ion-title translate class="oe-ci-font-family-bold">GENERAL.STORAGE_SYSTEM</ion-title>
    <ion-buttons slot="end">
      <oe-help-button key="REDIRECT.COMMON_STORAGE" useDefaultPrefix="false"></oe-help-button>

      <ion-button (click)="modalCtrl.dismiss()">
        <ion-icon name="close-outline" style="color: var(--ion-title-color)"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content style="height: 100%">
  <form [formGroup]="formGroup" *ngIf="formGroup" style="margin-bottom: 15%" class="align_items">
    <!-- one ESS Component -->
    <ng-container *ngIf="essComponents?.length === 1 && edge.currentData | async as currentData">
      <ng-container *ngFor="let component of essComponents">
        <ion-card-content [class.underline]="!isLastElement(component, essComponents)">
          @let sum = currentData.summary.storage;
          <table class="full_width">
            <div style="padding-top: 5px"></div>
            <tr>
              <td style="width: 65%" translate>GENERAL.SOC</td>
              <td style="width: 35%" class="align_right">
                {{ sum.soc | unitvalue: "%" }}
              </td>
            </tr>
            <!-- Charge/Discharge -->
            <tr>
              <td style="width: 65%" translate>GENERAL.CHARGE</td>
              <td style="width: 35%" class="align_right">{{ (sum.effectivePower <= 0 ? sum.effectivePower * -1 : null) | unitvalue: "W" }}</td>
            </tr>
            <tr>
              <td style="width: 65%" translate>GENERAL.DISCHARGE</td>
              <td style="width: 35%" class="align_right">
                {{ (sum.effectivePower > 0 ? sum.effectivePower : null) | unitvalue: "W" }}
              </td>
            </tr>
          </table>
          <!-- 3 Phases -->
          <div style="padding-top: 5px"></div>
          <table class="full_width" *ngIf="sum.activePowerL1 !== null && sum.activePowerL2 !== null && sum.activePowerL3 !== null">
            <ng-container *ngFor="let phase of ['L1', 'L2', 'L3']">
              <ng-container *ngIf="chargerComponents?.length !== 0; else noCharger">
                <ng-container>
                  @let value = sum["effectiveActivePower" + phase];
                  <ng-container *ngIf="value !== null && value !== undefined">
                    <tr *ngIf="value > 0">
                      <td style="width: 2%"></td>
                      <td style="width: 63%"><span translate>GENERAL.PHASE</span> {{ phase }} <span translate>GENERAL.DISCHARGE</span></td>
                      <td style="width: 35%" class="align_right">
                        {{ value | unitvalue: "W" }}
                      </td>
                    </tr>
                    <tr *ngIf="value <= 0">
                      <td style="width: 2%"></td>
                      <td style="width: 63%"><span translate>GENERAL.PHASE</span> {{ phase }} <span translate>GENERAL.CHARGE</span></td>
                      <td style="width: 35%" class="align_right">
                        {{ value * -1 | unitvalue: "W" }}
                      </td>
                    </tr>
                  </ng-container>
                </ng-container>
              </ng-container>
              <ng-template #noCharger>
                <ng-container>
                  @let value = sum["activePower" + phase];
                  <ng-container *ngIf="value !== null && value !== undefined">
                    <tr *ngIf="value > 0">
                      <td style="width: 2%"></td>
                      <td style="width: 63%"><span translate>GENERAL.PHASE</span> {{ phase }} <span translate>GENERAL.DISCHARGE</span></td>
                      <td style="width: 35%" class="align_right">
                        {{ value | unitvalue: "W" }}
                      </td>
                    </tr>
                    <tr *ngIf="value <= 0">
                      <td style="width: 2%"></td>
                      <td style="width: 63%"><span translate>GENERAL.PHASE</span> {{ phase }} <span translate>GENERAL.CHARGE</span></td>
                      <td style="width: 35%" class="align_right">
                        {{ value * -1 | unitvalue: "W" }}
                      </td>
                    </tr>
                  </ng-container>
                </ng-container>
              </ng-template>
            </ng-container>
          </table>

          <!-- Show if ess has EmergencyCapacityReserveController assigned-->
          <ng-container [formGroupName]="component.id" *ngIf="formGroup.controls[component.id]">
            <ng-container [formGroupName]="'emergencyReserveController'" *ngIf="formGroup.value[component.id]?.['emergencyReserveController']">
              <ng-container>
                <table class="full_width" style="margin-top: 2%">
                  <tr>
                    <ion-item-divider color="light">
                      <td style="width: 70%" translate>EDGE.INDEX.EMERGENCY_RESERVE.EMERGENCY_RESERVE</td>
                      <td style="width: 15%" class="align_right">
                        {{ formGroup.value[component.id]?.["emergencyReserveController"]?.reserveSoc | unitvalue: "%" }}
                      </td>
                      <td style="width: 15%" class="align_right">
                        <!-- Sets the emergencyEnabled temporarily, to show the slider without changing config  -->
                        <ng-container *ngIf="formGroup.controls[component.id].value['emergencyReserveController'].hasOwnProperty('isReserveSocEnabled')">
                          <ion-toggle tabindex="0" mode="md" [formControlName]="'isReserveSocEnabled'"> </ion-toggle>
                        </ng-container>
                      </td>
                    </ion-item-divider>
                  </tr>
                </table>
                <table class="full_width" style="margin-top: 2%">
                  <tr>
                    <td style="width: 10%">
                      <ion-icon name="information-outline" size="large"></ion-icon>
                    </td>
                    <td style="width: 90%">
                      <ion-note class="ion-text-wrap ion-align-items-center">
                        <ion-text>
                          <small translate> EDGE.INDEX.EMERGENCY_RESERVE.INFO_FOR_EMERGENCY_RESERVE_SLIDER </small>
                        </ion-text>
                      </ion-note>
                    </td>
                  </tr>
                </table>

                <!-- Show only when EmergencyReserve is enabled -->
                <ng-container *ngIf="formGroup.value[component.id]?.['emergencyReserveController']?.['reserveSoc'] && formGroup.value[component.id]?.['emergencyReserveController']?.['isReserveSocEnabled']">
                  <ion-range formControlName="reserveSoc" pin color="primary" min="5" max="100">
                    <ion-label slot="start">
                      {{ 5 | unitvalue: "%" }}
                    </ion-label>
                    <ion-label slot="end">
                      {{ 100 | unitvalue: "%" }}
                    </ion-label>
                  </ion-range>

                  <ng-container *ngIf="this.formGroup.controls['_meta']">
                    <oe-modal-horizontal-line></oe-modal-horizontal-line>

                    <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.STORAGE.GRID_CHARGE' | translate" [formGroup]="this.formGroup.controls['_meta']" controlName="isEssChargeFromGridAllowed" [control]="{ type: 'TOGGLE' }" leftColumnWidth="100"> </oe-modal-line>

                    <oe-modal-line [innerHtml]="'EDGE.INDEX.WIDGETS.STORAGE.GRID_CHARGE_WARNING' | translate"> </oe-modal-line>

                    <oe-modal-horizontal-line></oe-modal-horizontal-line>
                  </ng-container>
                </ng-container>
              </ng-container>
            </ng-container>

            <ng-container [formGroupName]="'prepareBatteryExtensionController'" *ngIf="formGroup.value[component.id]?.['prepareBatteryExtensionController']?.hasOwnProperty('isRunning') && isAtLeastInstaller">
              <table class="full_width" style="margin-top: 2%">
                <tr>
                  <ion-item-divider color="light">
                    <td style="width: 90%" translate>EDGE.INDEX.RETROFITTING.OPTIMAL</td>
                    <td style="width: 15%" class="align_right">
                      <ion-toggle mode="md" formControlName="isRunning"> </ion-toggle>
                    </td>
                  </ion-item-divider>
                </tr>
              </table>
              <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['isRunning']">
                <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController'] !== null">
                  <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController'] as prepareBatteryExtensionController">
                    <ion-segment [formControlName]="'targetTimeSpecified'">
                      <ion-segment-button value="false">
                        <ion-label>{{ "EDGE.INDEX.RETROFITTING.INSTANT_START" | translate }}</ion-label>
                      </ion-segment-button>
                      <ion-segment-button value="true">
                        <ion-label>{{ "EDGE.INDEX.RETROFITTING.PLANNED_EXPANSION" | translate }}</ion-label>
                      </ion-segment-button>
                    </ion-segment>

                    <table class="full_width" style="margin-top: 2%" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'false' && prepareBatteryExtensionController['targetTime'] && prepareBatteryExtensionController['targetSoc'] && prepareBatteryExtensionController['targetTimeBuffer']">
                      <tr>
                        <td style="width: 10%">
                          <ion-icon name="information-outline" size="large"></ion-icon>
                        </td>
                        <td style="width: 90%">
                          <ion-note class="ion-text-wrap ion-align-items-center">
                            <ion-text>
                              <small translate [translateParams]="{ targetSoc: prepareBatteryExtensionController['targetSoc'], targetTime: prepareBatteryExtensionController['targetTime'], targetTimeBuffer: prepareBatteryExtensionController['targetTimeBuffer'] }" translate> EDGE.INDEX.RETROFITTING.INFORMATION_FOR_INSTANT_START </small>
                            </ion-text>
                          </ion-note>
                        </td>
                      </tr>
                    </table>

                    <table class="full_width" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'true'">
                      <tr style="display: block; width: 75%; margin-left: 12.5%; margin-top: 2%">
                        <!-- Date picker -->
                        <td style="width: 20%; text-align: center">
                          <ion-item button="true" id="open-date-input">
                            <ion-label style="text-align: center" *ngIf="prepareBatteryExtensionController['targetTime'] as targetTime; else noValidTargetTime">
                              {{ "EDGE.INDEX.RETROFITTING.ON_DATE_AT_TIME" | translate: { date: targetTime | date: "dd.MM.yyyy", time: targetTime | date: "HH:mm" } }}
                            </ion-label>

                            <ng-template #noValidTargetTime>
                              <ion-icon name="oe-warning" color="warning"></ion-icon>
                              <ion-label style="text-align: center">
                                {{ "EDGE.INDEX.RETROFITTING.SELECT_A_DATE" | translate }}
                              </ion-label>
                            </ng-template>

                            <ion-popover trigger="open-date-input" show-backdrop="false" side="top" style="--offset-y: 0px !important; --height: 50%">
                              <ng-template>
                                <ion-datetime [showDefaultButtons]="true" style="overflow-y: auto" presentation="date-time" [doneText]="translate.instant('GENERAL.OK')" [cancelText]="translate.instant('GENERAL.CANCEL')" [formControlName]="'targetTime'"></ion-datetime>
                              </ng-template>
                            </ion-popover>
                          </ion-item>
                        </td>
                      </tr>
                    </table>
                    <table class="full_width" style="margin-top: 2%" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'true'">
                      <tr>
                        <td style="width: 10%">
                          <ion-icon name="information-outline" size="large"></ion-icon>
                        </td>
                        <td style="width: 90%">
                          <ion-note class="ion-text-wrap ion-align-items-center">
                            <ion-text>
                              <small *ngIf="!isTargetTimeInValid.get(component.id) && this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetTimeBuffer']" translate [translateParams]="{ targetDate: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['expectedStartOfPreparation'] | date: 'dd.MM.yyyy', targetTime: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['expectedStartOfPreparation'] | date: 'HH:mm', targetSoc: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetSoc'], targetTimeBuffer: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetTimeBuffer'] }" translate> EDGE.INDEX.RETROFITTING.INFORMATION_FOR_PLANNED_EXPANSION </small>
                              <small
                                *ngIf="isTargetTimeInValid.get(component.id)"
                                translate
                                [translateParams]="{
                                  targetSoc: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetSoc'],
                                }"
                                translate
                              >
                                EDGE.INDEX.RETROFITTING.INFORMATION_FOR_PLANNED_EXPANSION_INVALID_TARGET_DATE
                              </small>
                            </ion-text>
                          </ion-note>
                        </td>
                      </tr>
                    </table>
                  </ng-container>
                </ng-container>
              </ng-container>

              <!-- Show only when isRunning is activated -->
            </ng-container>
          </ng-container>
        </ion-card-content>
      </ng-container>
    </ng-container>

    <!-- more than one ESS component -->
    <ng-container *ngIf="essComponents?.length > 1">
      <!-- summary of all ESS components -->
      <ion-card-content class="underline" *ngIf="edge.currentData | async as currentData">
        <ng-container *ngIf="currentData.summary.storage as sum">
          <table class="full_width">
            <tr>
              <td style="width: 100%" translate>GENERAL.TOTAL</td>
            </tr>
            <div style="padding-top: 5px"></div>
            <tr>
              <td style="width: 65%" translate>GENERAL.SOC</td>
              <td style="width: 35%" class="align_right">
                {{ sum.soc | unitvalue: "%" }}
              </td>
            </tr>
            <tr>
              <td style="width: 65%" translate>GENERAL.CHARGE</td>
              <td style="width: 35%" class="align_right">
                {{ sum.effectiveChargePower | unitvalue: "W" }}
              </td>
            </tr>
            <tr>
              <td style="width: 65%" translate>GENERAL.DISCHARGE</td>
              <td style="width: 35%" class="align_right">
                {{ sum.effectiveDischargePower | unitvalue: "W" }}
              </td>
            </tr>
          </table>
          <!-- 3 Phases -->
          <ng-container *ngIf="sum.activePowerL1 !== null && sum.activePowerL2 !== null && sum.activePowerL3 !== null">
            <div style="padding-top: 5px"></div>
            <table class="full_width">
              <ng-container *ngFor="let phase of ['L1', 'L2', 'L3']">
                <ng-container *ngIf="chargerComponents?.length !== 0; else noCharger">
                  <ng-container>
                    @let value = sum["effectiveActivePower" + phase];
                    <ng-container *ngIf="value !== null && value !== undefined">
                      <tr *ngIf="value > 0">
                        <td style="width: 2%"></td>
                        <td style="width: 63%">
                          <span translate>GENERAL.PHASE</span> {{ phase }}
                          <span translate>GENERAL.DISCHARGE</span>
                        </td>
                        <td style="width: 35%" class="align_right">
                          {{ value | unitvalue: "W" }}
                        </td>
                      </tr>
                      <tr *ngIf="value <= 0">
                        <td style="width: 2%"></td>
                        <td style="width: 63%">
                          <span translate>GENERAL.PHASE</span> {{ phase }}
                          <span translate>GENERAL.CHARGE</span>
                        </td>
                        <td style="width: 35%" class="align_right">
                          {{ value * -1 | unitvalue: "W" }}
                        </td>
                      </tr>
                    </ng-container>
                  </ng-container>
                </ng-container>
                <ng-template #noCharger>
                  <ng-container>
                    @let value = sum["activePower" + phase];
                    <ng-container *ngIf="value !== null && value !== undefined">
                      <tr *ngIf="value > 0">
                        <td style="width: 2%"></td>
                        <td style="width: 63%">
                          <span translate>GENERAL.PHASE</span> {{ phase }}
                          <span translate>GENERAL.DISCHARGE</span>
                        </td>
                        <td style="width: 35%" class="align_right">
                          {{ value | unitvalue: "W" }}
                        </td>
                      </tr>
                      <tr *ngIf="value <= 0">
                        <td style="width: 2%"></td>
                        <td style="width: 63%">
                          <span translate>GENERAL.PHASE</span> {{ phase }}
                          <span translate>GENERAL.CHARGE</span>
                        </td>
                        <td style="width: 35%" class="align_right">
                          {{ value * -1 | unitvalue: "W" }}
                        </td>
                      </tr>
                    </ng-container>
                  </ng-container>
                </ng-template>
              </ng-container>
            </table>
            <!-- Info Text -->
            <ng-container *ngIf="service.currentEdge() as edge">
              <ng-container *ngIf="edge.currentData | async as currentData">
                <ng-container *ngIf="currentData.summary.storage as sum">
                  <ion-grid *ngIf="sum.activePowerL1 !== null && sum.activePowerL2 !== null && sum.activePowerL3 !== null" class="ion-padding-top">
                    <ion-row class="ion-justify-content-center ion-align-items-center">
                      <ion-col size="2" class="ion-text-center">
                        <ion-icon padding-right color="primary" size="large" name="alert-outline"> </ion-icon>
                      </ion-col>
                      <ion-col size="10">
                        <ion-note class="ion-text-wrap"><small translate>EDGE.INDEX.WIDGETS.PHASES_INFO</small> </ion-note>
                      </ion-col>
                    </ion-row>
                  </ion-grid>
                </ng-container>
              </ng-container>
            </ng-container>
          </ng-container>
        </ng-container>
      </ion-card-content>

      <ng-container *ngIf="(edge.currentData | async)['channel'] as currentData">
        <ng-container *ngFor="let component of essComponents">
          <ng-container *ngIf="config.factories[component.factoryId] as factory">
            <ion-card-content [class.underline]="chargerComponents?.length > 0 || !isLastElement(component, essComponents)">
              <table class="full_width">
                <tr>
                  <td style="width: 100%">
                    {{ component.alias }}
                  </td>
                </tr>
                <div style="padding-top: 5px"></div>
                <tr>
                  <td style="width: 65%" translate>GENERAL.SOC</td>
                  <td style="width: 35%" class="align_right">
                    {{ currentData[component.id + "/Soc"] | unitvalue: "%" }}
                  </td>
                </tr>
              </table>
              <!-- Symmetric ESS -->
              <ng-container>
                @let value = currentData[component.id + "/ActivePower"];
                <table *ngIf="factory.natureIds.includes('io.openems.edge.ess.api.SymmetricEss') && value !== null && value !== undefined" class="full_width">
                  <tr>
                    <td style="width: 65%" translate>GENERAL.CHARGE</td>
                    <td style="width: 35%" class="align_right">{{ (value <= 0 ? value * -1 : null) | unitvalue: "W" }}</td>
                    <td></td>
                  </tr>
                  <tr>
                    <td style="width: 65%" translate>GENERAL.DISCHARGE</td>
                    <td style="width: 35%" class="align_right">{{ (value > 0 ? value : null) | unitvalue: "W" }}</td>

                    <td></td>
                  </tr>
                </table>
              </ng-container>
              <!-- Asymmetric ESS -->
              <table *ngIf="factory.natureIds.includes('io.openems.edge.ess.api.AsymmetricEss')" class="full_width">
                <ng-container *ngFor="let phase of ['L1', 'L2', 'L3']">
                  <ng-container>
                    @let value = currentData[component.id + "/ActivePower" + phase];
                    <tr *ngIf="value !== null && value !== undefined">
                      <ng-container *ngIf="value > 0">
                        <td style="width: 2%"></td>
                        <td style="width: 63%">
                          <span translate>GENERAL.PHASE</span> {{ phase }}
                          <span translate>GENERAL.DISCHARGE</span>
                        </td>
                        <td style="width: 35%" class="align_right">
                          {{ value | unitvalue: "W" }}
                        </td>
                      </ng-container>
                      <ng-container *ngIf="value <= 0">
                        <td style="width: 2%"></td>
                        <td style="width: 63%">
                          <span translate>GENERAL.PHASE</span> {{ phase }}
                          <span translate>GENERAL.CHARGE</span>
                        </td>
                        <td style="width: 35%" class="align_right">
                          {{ value * -1 | unitvalue: "W" }}
                        </td>
                      </ng-container>
                    </tr>
                  </ng-container>
                </ng-container>
              </table>

              <!-- Show if ess has EmergencyCapacityReserveController assigned-->
              <ng-container [formGroupName]="component.id" *ngIf="formGroup.controls[component.id]">
                <ng-container [formGroupName]="'emergencyReserveController'">
                  <ng-container *ngIf="formGroup.value[component.id]?.['emergencyReserveController']">
                    <table class="full_width" style="margin-top: 2%">
                      <tr>
                        <ion-item-divider color="light">
                          <td style="width: 70%" translate>EDGE.INDEX.EMERGENCY_RESERVE.EMERGENCY_RESERVE</td>
                          <td style="width: 15%" class="align_right">
                            {{ formGroup.value[component.id]?.["emergencyReserveController"]?.reserveSoc | unitvalue: "%" }}
                          </td>
                          <td style="width: 15%" class="align_right">
                            <!-- Sets the emergencyEnabled temporarily, to show the slider without changing config  -->
                            <ng-container *ngIf="formGroup.controls[component.id].value['emergencyReserveController'].hasOwnProperty('isReserveSocEnabled')">
                              <ion-toggle mode="md" [formControlName]="'isReserveSocEnabled'"> </ion-toggle>
                            </ng-container>
                          </td>
                        </ion-item-divider>
                      </tr>
                    </table>

                    <table class="full_width" style="margin-top: 2%">
                      <tr>
                        <td style="width: 10%">
                          <ion-icon name="information-outline" size="large"></ion-icon>
                        </td>
                        <td style="width: 90%">
                          <ion-note class="ion-text-wrap ion-align-items-center">
                            <ion-text>
                              <small style="color: var(--ion-text-color)" translate> EDGE.INDEX.EMERGENCY_RESERVE.INFO_FOR_EMERGENCY_RESERVE_SLIDER </small>
                            </ion-text>
                          </ion-note>
                        </td>
                      </tr>
                    </table>

                    <!-- Show only when EmergencyReserve is enabled -->
                    <ng-container *ngIf="formGroup.value[component.id]?.['emergencyReserveController']?.['reserveSoc'] && formGroup.value[component.id]?.['emergencyReserveController']?.['isReserveSocEnabled']">
                      <ion-range formControlName="reserveSoc" pin color="primary" min="5" max="100">
                        <ion-label slot="start">
                          {{ 5 | unitvalue: "%" }}
                        </ion-label>
                        <ion-label slot="end">
                          {{ 100 | unitvalue: "%" }}
                        </ion-label>
                      </ion-range>
                    </ng-container>
                  </ng-container>
                </ng-container>

                <ng-container [formGroupName]="'prepareBatteryExtensionController'" *ngIf="formGroup.value[component.id]?.['prepareBatteryExtensionController']?.hasOwnProperty('isRunning') && isAtLeastInstaller">
                  <table class="full_width" style="margin-top: 2%">
                    <tr>
                      <ion-item-divider color="light">
                        <td style="width: 90%" translate>EDGE.INDEX.RETROFITTING.OPTIMAL</td>
                        <td style="width: 15%" class="align_right">
                          <ion-toggle mode="md" formControlName="isRunning"> </ion-toggle>
                        </td>
                      </ion-item-divider>
                    </tr>
                  </table>
                  <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['isRunning']">
                    <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController'] !== null">
                      <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController'] as prepareBatteryExtensionController">
                        <ion-segment [formControlName]="'targetTimeSpecified'">
                          <ion-segment-button value="false">
                            <ion-label translate>EDGE.INDEX.RETROFITTING.INSTANT_START</ion-label>
                          </ion-segment-button>
                          <ion-segment-button value="true">
                            <ion-label translate>EDGE.INDEX.RETROFITTING.PLANNED_EXPANSION</ion-label>
                          </ion-segment-button>
                        </ion-segment>

                        <table class="full_width" style="margin-top: 2%" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'false' && prepareBatteryExtensionController['targetTime'] && prepareBatteryExtensionController['targetSoc'] && prepareBatteryExtensionController['targetTimeBuffer']">
                          <tr>
                            <td style="width: 10%">
                              <ion-icon name="information-outline" size="large"></ion-icon>
                            </td>
                            <td style="width: 90%">
                              <ion-note class="ion-text-wrap ion-align-items-center">
                                <ion-text>
                                  <small translate [translateParams]="{ targetSoc: prepareBatteryExtensionController['targetSoc'], targetTime: prepareBatteryExtensionController['targetTime'], targetTimeBuffer: prepareBatteryExtensionController['targetTimeBuffer'] }" translate> EDGE.INDEX.RETROFITTING.INFORMATION_FOR_INSTANT_START </small>
                                </ion-text>
                              </ion-note>
                            </td>
                          </tr>
                        </table>

                        <table class="full_width" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'true'">
                          <tr style="display: block; width: 75%; margin-left: 12.5%; margin-top: 2%">
                            <!-- Date picker -->
                            <td style="width: 20%; text-align: center">
                              <ion-item button="true" id="open-date-input">
                                <ion-label style="text-align: center" *ngIf="prepareBatteryExtensionController['targetTime'] as targetTime; else noValidTargetTime">
                                  {{ "EDGE.INDEX.RETROFITTING.ON_DATE_AT_TIME" | translate: { date: targetTime | date: "dd.MM.yyyy", time: targetTime | date: "HH:mm" } }}
                                </ion-label>

                                <ng-template #noValidTargetTime>
                                  <ion-icon name="oe-warning" color="warning"></ion-icon>
                                  <ion-label style="text-align: center">
                                    {{ "EDGE.INDEX.RETROFITTING.SELECT_A_DATE" | translate }}
                                  </ion-label>
                                </ng-template>

                                <ion-popover trigger="open-date-input" show-backdrop="false" side="top" style="--offset-y: 0px !important; --height: 50%">
                                  <ng-template>
                                    <ion-datetime [showDefaultButtons]="true" style="overflow-y: auto" presentation="date-time" [doneText]="translate.instant('GENERAL.OK')" [cancelText]="translate.instant('GENERAL.CANCEL')" [formControlName]="'targetTime'"></ion-datetime>
                                  </ng-template>
                                </ion-popover>
                              </ion-item>
                            </td>
                          </tr>
                        </table>
                        <table class="full_width" style="margin-top: 2%" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'true'">
                          <tr>
                            <td style="width: 10%">
                              <ion-icon name="information-outline" size="large"></ion-icon>
                            </td>
                            <td style="width: 90%">
                              <ion-note class="ion-text-wrap ion-align-items-center">
                                <ion-text>
                                  <small *ngIf="!isTargetTimeInValid.get(component.id) && this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetTimeBuffer']" translate [translateParams]="{ targetDate: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['expectedStartOfPreparation'] | date: 'dd.MM.yyyy', targetTime: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['expectedStartOfPreparation'] | date: 'HH:mm', targetSoc: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetSoc'], targetTimeBuffer: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetTimeBuffer'] }" translate> EDGE.INDEX.RETROFITTING.INFORMATION_FOR_PLANNED_EXPANSION </small>
                                  <small
                                    *ngIf="isTargetTimeInValid.get(component.id)"
                                    translate
                                    [translateParams]="{
                                      targetSoc: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetSoc'],
                                    }"
                                    translate
                                  >
                                    EDGE.INDEX.RETROFITTING.INFORMATION_FOR_PLANNED_EXPANSION_INVALID_TARGET_DATE
                                  </small>
                                </ion-text>
                              </ion-note>
                            </td>
                          </tr>
                        </table>
                      </ng-container>
                    </ng-container>

                    <!-- Show only when isRunning is activated -->
                  </ng-container>
                </ng-container>
              </ng-container>
            </ion-card-content>
          </ng-container>
        </ng-container>
      </ng-container>
    </ng-container>

    <!-- DC Charger -->
    <ng-container *ngIf="chargerComponents?.length !== 0 && essComponents?.length !== 1">
      <ng-container *ngFor="let component of chargerComponents">
        <ion-card-content [class.underline]="!isLastElement(component, chargerComponents)">
          <table *ngIf="(edge.currentData | async)['channel'] as currentData" class="full_width">
            <ng-container>
              @let value = currentData[component.id + "/ActualPower"];
              <ng-container *ngIf="value !== null && value !== undefined">
                <tr>
                  <td style="width: 100%">{{ component.alias }}</td>
                </tr>
                <tr>
                  <td style="width: 20%" translate>GENERAL.CHARGE</td>
                  <td style="width: 30%"></td>
                  <td style="width: 35%" class="align_right">
                    {{ (value > 0 ? value : null) | unitvalue: "W" }}
                  </td>
                </tr>
                <tr>
                  <td style="width: 20%" translate>GENERAL.DISCHARGE</td>
                  <td style="width: 30%"></td>
                  <td style="width: 35%" class="align_right">
                    {{ value <= 0 ? value * -1 : (null | unitvalue: "W") }}
                  </td>
                </tr>
              </ng-container>
            </ng-container>
          </table>

          <!-- Show if ess has EmergencyCapacityReserveController assigned-->
          <ng-container [formGroupName]="component.id" *ngIf="formGroup.controls[component.id]">
            <ng-container [formGroupName]="'emergencyReserveController'">
              <ng-container *ngIf="formGroup.value[component.id]?.['emergencyReserveController']">
                <table class="full_width" style="margin-top: 2%">
                  <tr>
                    <ion-item-divider color="light">
                      <td style="width: 70%" translate>EDGE.INDEX.EMERGENCYRESERVE.EMERGENCY_RESERVE</td>
                      <td style="width: 15%" class="align_right">
                        {{ formGroup.value[component.id]?.["emergencyReserveController"]?.reserveSoc | unitvalue: "%" }}
                      </td>
                      <td style="width: 15%" class="align_right">
                        <!-- Sets the emergencyEnabled temporarily, to show the slider without changing config  -->
                        <ng-container *ngIf="formGroup.controls[component.id].value['emergencyReserveController'].hasOwnProperty('isReserveSocEnabled')">
                          <ion-toggle mode="md" [formControlName]="'isReserveSocEnabled'"> </ion-toggle>
                        </ng-container>
                      </td>
                    </ion-item-divider>
                  </tr>
                </table>
                <table class="full_width" style="margin-top: 2%">
                  <tr>
                    <td style="width: 10%">
                      <ion-icon name="information-outline" size="large"></ion-icon>
                    </td>
                    <td style="width: 90%">
                      <ion-note class="ion-text-wrap ion-align-items-center">
                        <ion-text>
                          <small style="color: var(--ion-text-color)" translate> EDGE.INDEX.EMERGENCY_RESERVE.INFO_FOR_EMERGENCY_RESERVE_SLIDER </small>
                        </ion-text>
                      </ion-note>
                    </td>
                  </tr>
                </table>

                <!-- Show only when EmergencyReserve is enabled -->
                <ng-container *ngIf="formGroup.value[component.id]?.['emergencyReserveController']?.['reserveSoc'] && formGroup.value[component.id]?.['emergencyReserveController']?.['isReserveSocEnabled']">
                  <ion-range formControlName="reserveSoc" pin color="primary" min="5" max="100">
                    <ion-label slot="start">
                      {{ 5 | unitvalue: "%" }}
                    </ion-label>
                    <ion-label slot="end">
                      {{ 100 | unitvalue: "%" }}
                    </ion-label>
                  </ion-range>
                </ng-container>
              </ng-container>
            </ng-container>
            <ng-container [formGroupName]="'prepareBatteryExtensionController'" *ngIf="formGroup.value[component.id]?.['prepareBatteryExtensionController']?.hasOwnProperty('isRunning') && isAtLeastInstaller">
              <table class="full_width" style="margin-top: 2%">
                <tr>
                  <ion-item-divider color="light">
                    <td style="width: 90%" translate>EDGE.INDEX.RETROFITTING.OPTIMAL</td>
                    <td style="width: 15%" class="align_right">
                      <ion-toggle mode="md" formControlName="isRunning"> </ion-toggle>
                    </td>
                  </ion-item-divider>
                </tr>
              </table>
              <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['isRunning']">
                <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController'] !== null">
                  <ng-container *ngIf="this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController'] as prepareBatteryExtensionController">
                    <ion-segment [formControlName]="'targetTimeSpecified'">
                      <ion-segment-button value="false">
                        <ion-label translate>EDGE.INDEX.RETROFITTING.INSTANT_START</ion-label>
                      </ion-segment-button>
                      <ion-segment-button value="true">
                        <ion-label translate>EDGE.INDEX.RETROFITTING.PLANNED_EXPANSION</ion-label>
                      </ion-segment-button>
                    </ion-segment>

                    <table class="full_width" style="margin-top: 2%" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'false' && prepareBatteryExtensionController['targetTime'] && prepareBatteryExtensionController['targetSoc'] && prepareBatteryExtensionController['targetTimeBuffer']">
                      <tr>
                        <td style="width: 10%">
                          <ion-icon name="information-outline" size="large"></ion-icon>
                        </td>
                        <td style="width: 90%">
                          <ion-note class="ion-text-wrap ion-align-items-center">
                            <ion-text>
                              <small translate [translateParams]="{ targetSoc: prepareBatteryExtensionController['targetSoc'], targetTime: prepareBatteryExtensionController['targetTime'], targetTimeBuffer: prepareBatteryExtensionController['targetTimeBuffer'] }" translate> EDGE.INDEX.RETROFITTING.INFORMATION_FOR_INSTANT_START </small>
                            </ion-text>
                          </ion-note>
                        </td>
                      </tr>
                    </table>

                    <table class="full_width" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'true'">
                      <tr style="display: block; width: 75%; margin-left: 12.5%; margin-top: 2%">
                        <!-- Date picker -->
                        <td style="width: 20%; text-align: center">
                          <ion-item button="true" id="open-date-input">
                            <ion-label style="text-align: center" *ngIf="prepareBatteryExtensionController['targetTime'] as targetTime; else noValidTargetTime">
                              {{ "EDGE.INDEX.RETROFITTING.ON_DATE_AT_TIME" | translate: { date: targetTime | date: "dd.MM.yyyy", time: targetTime | date: "HH:mm" } }}
                            </ion-label>

                            <ng-template #noValidTargetTime>
                              <ion-icon name="oe-warning" color="warning"></ion-icon>
                              <ion-label style="text-align: center">
                                {{ "EDGE.INDEX.RETROFITTING.SELECT_A_DATE" | translate }}
                              </ion-label>
                            </ng-template>

                            <ion-popover trigger="open-date-input" show-backdrop="false" side="top" style="--offset-y: 0px !important; --height: 50%">
                              <ng-template>
                                <ion-datetime [showDefaultButtons]="true" style="overflow-y: auto" presentation="date-time" [doneText]="translate.instant('GENERAL.OK')" [cancelText]="translate.instant('GENERAL.CANCEL')" [formControlName]="'targetTime'"></ion-datetime>
                              </ng-template>
                            </ion-popover>
                          </ion-item>
                        </td>
                      </tr>
                    </table>
                    <table class="full_width" style="margin-top: 2%" *ngIf="prepareBatteryExtensionController['targetTimeSpecified'] === 'true'">
                      <tr>
                        <td style="width: 10%">
                          <ion-icon name="information-outline" size="large"></ion-icon>
                        </td>
                        <td style="width: 90%">
                          <ion-note class="ion-text-wrap ion-align-items-center">
                            <ion-text>
                              <small *ngIf="!isTargetTimeInValid.get(component.id) && this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetTimeBuffer']" translate [translateParams]="{ targetDate: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['expectedStartOfPreparation'] | date: 'dd.MM.yyyy', targetTime: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['expectedStartOfPreparation'] | date: 'HH:mm', targetSoc: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetSoc'], targetTimeBuffer: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetTimeBuffer'] }" translate> EDGE.INDEX.RETROFITTING.INFORMATION_FOR_PLANNED_EXPANSION </small>
                              <small
                                *ngIf="isTargetTimeInValid.get(component.id)"
                                translate
                                [translateParams]="{
                                  targetSoc: this.formGroup.controls[component.id]?.value['prepareBatteryExtensionController']['targetSoc'],
                                }"
                                translate
                              >
                                EDGE.INDEX.RETROFITTING.INFORMATION_FOR_PLANNED_EXPANSION_INVALID_TARGET_DATE
                              </small>
                            </ion-text>
                          </ion-note>
                        </td>
                      </tr>
                    </table>
                  </ng-container>
                </ng-container>

                <!-- Show only when isRunning is activated -->
              </ng-container>
            </ng-container>
          </ng-container>
        </ion-card-content>
      </ng-container>
    </ng-container>
  </form>

  <ion-fab *ngIf="formGroup?.dirty" class="ion-padding-bottom" vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="applyChanges()">
      <ion-icon size="large" name="oe-checkmark"> </ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
