<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%">
  @if (formGroup) {
    <form [formGroup]="formGroup" style="margin-bottom: 15%" class="align_items">
      <!-- one ESS Component -->
      @if (essComponents?.length === 1 && edge.currentData | async; as currentData) {
        @for (component of essComponents; track component) {
          <ion-card-content [class.underline]="!isLastElement(component, essComponents)">
            @let sum = currentData.summary.storage;
            <common-storage-system [component]="component"></common-storage-system>
            <!-- Show if ess has EmergencyCapacityReserveController assigned-->
            @if (formGroup.controls[component.id]) {
              <ng-container [formGroupName]="component.id">
                @if (formGroup.value[component.id]?.["emergencyReserveController"]) {
                  <ng-container [formGroupName]="'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  -->
                              @if (formGroup.controls[component.id].value["emergencyReserveController"].hasOwnProperty("isReserveSocEnabled")) {
                                <ion-toggle tabindex="0" mode="md" [formControlName]="'isReserveSocEnabled'"> </ion-toggle>
                              }
                            </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 -->
                      @if (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>
                        <oe-modal-horizontal-line></oe-modal-horizontal-line>
                        @if (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> -->
                          <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>
                          <!-- Date picker -->
                          @if (prepareBatteryExtensionController["targetTimeSpecified"] === "true") {
                            <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>
                                      @if (!isTargetTimeInValid.get(component.id) && this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]["targetTimeBuffer"]) {
                                        <small 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>
                                      }
                                      @if (isTargetTimeInValid.get(component.id)) {
                                        <small
                                          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>
                }
                @if (formGroup.value[component.id]?.["prepareBatteryExtensionController"]?.hasOwnProperty("isRunning") && isAtLeastInstaller) {
                  <ng-container [formGroupName]="'prepareBatteryExtensionController'">
                    <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>
                    @if (this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]["isRunning"]) {
                      @if (controllerIsRequiredEdgeVersion) {
                        @if (this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"] !== null) {
                          @if (this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]; as prepareBatteryExtensionController) {
                            <!-- Debug: Reference Cycle status (visible for installer and above) -->
                            @if (prepareBatteryExtensionController["isInReferenceCycle"]) {
                              <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.RETROFITTING.IN_REFERENCE_CYCLE</small>
                                      </ion-text>
                                    </ion-note>
                                  </td>
                                </tr>
                              </table>
                            }
                            <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>
                            @if (prepareBatteryExtensionController["targetTimeSpecified"] === "false" && prepareBatteryExtensionController["targetTime"] && prepareBatteryExtensionController["targetSoc"] && prepareBatteryExtensionController["targetTimeBuffer"]) {
                              <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 [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>
                            }
                            @if (prepareBatteryExtensionController["targetTimeSpecified"] === "true") {
                              <table class="full_width">
                                <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">
                                      @if (prepareBatteryExtensionController["targetTime"]; as targetTime) {
                                        <ion-label style="text-align: center">
                                          {{ "EDGE.INDEX.RETROFITTING.ON_DATE_AT_TIME" | translate: { date: targetTime | date: "dd.MM.yyyy", time: targetTime | date: "HH:mm" } }}
                                        </ion-label>
                                      } @else {
                                        <ion-icon name="oe-warning" color="warning"></ion-icon>
                                        <ion-label style="text-align: center">
                                          {{ "EDGE.INDEX.RETROFITTING.SELECT_A_DATE" | translate }}
                                        </ion-label>
                                      }
                                      <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>
                            }
                            @if (prepareBatteryExtensionController["targetTimeSpecified"] === "true") {
                              <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>
                                        @if (!isTargetTimeInValid.get(component.id) && this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]["targetTimeBuffer"]) {
                                          <small 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>
                                        }
                                        @if (isTargetTimeInValid.get(component.id)) {
                                          <small
                                            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>
                            }
                          }
                        }
                      } @else {
                        <table class="full_width" style="margin-top: 2%">
                          <tr>
                            <td>
                              <ion-text>
                                <span translate> EDGE.INDEX.RETROFITTING.UPDATE_TO_NEW_VERSION </span>
                                →
                                <a (click)="modalCtrl.dismiss()" routerLink="/device/{{ edge.id }}/settings/system" [innerHtml]="'EDGE.INDEX.SYSTEMUPDATE' | translate"></a>
                              </ion-text>
                            </td>
                          </tr>
                        </table>
                      }
                    }
                  </ng-container>
                }
              </ng-container>
            }
            <!-- ESS SoH Cycle Controller Section -->
            <soh-cycle-section [component]="component" [formGroup]="formGroup" [spinnerId]="spinnerId" [edge]="edge"> </soh-cycle-section>
          </ion-card-content>
        }
      }
      <!-- more than one ESS component -->
      @if (essComponents?.length > 1) {
        <!-- summary of all ESS components -->
        @if (edge.currentData | async; as currentData) {
          <ion-card-content class="underline">
            @if (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 -->
              @if (sum.activePowerL1 !== null && sum.activePowerL2 !== null && sum.activePowerL3 !== null) {
                <div style="padding-top: 5px"></div>
                <table class="full_width">
                  @for (phase of ["L1", "L2", "L3"]; track phase) {
                    @if (chargerComponents?.length !== 0) {
                      <ng-container>
                        @let value = sum["effectiveActivePower" + phase];
                        @if (value !== null && value !== undefined) {
                          @if (value > 0) {
                            <tr>
                              <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>
                          }
                          @if (value <= 0) {
                            <tr>
                              <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>
                    } @else {
                      <ng-container>
                        @let value = sum["activePower" + phase];
                        @if (value !== null && value !== undefined) {
                          @if (value > 0) {
                            <tr>
                              <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>
                          }
                          @if (value <= 0) {
                            <tr>
                              <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>
                    }
                  }
                </table>
                <!-- Info Text -->
                @if (service.currentEdge(); as edge) {
                  @if (edge.currentData | async; as currentData) {
                    @if (currentData.summary.storage; as sum) {
                      @if (sum.activePowerL1 !== null && sum.activePowerL2 !== null && sum.activePowerL3 !== null) {
                        <ion-grid 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>
                      }
                    }
                  }
                }
              }
            }
          </ion-card-content>
        }
        @if ((edge.currentData | async)["channel"]; as currentData) {
          <ion-accordion-group [multiple]="true" class="ess-accordion-group">
            @for (component of essComponents; track component; let i = $index) {
              <ion-accordion [value]="component.id" class="ess-accordion ion-align">
                <ion-item slot="header" class="ess-accordion-header">
                  <ion-label style="font-weight: bold">
                    {{ component.alias || "Speichersystem " + (i + 1) }}
                  </ion-label>
                </ion-item>
                <div slot="content" class="ion-padding ess-accordion-content">
                  <common-storage-system [component]="component"></common-storage-system>
                  @if (config.factories[component.factoryId]; as factory) {
                    <!-- Controller sections (emergency reserve + battery extension) -->
                    @if (formGroup.controls[component.id]) {
                      <ng-container [formGroupName]="component.id">
                        <ng-container [formGroupName]="'emergencyReserveController'">
                          @if (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">
                                    @if (formGroup.controls[component.id].value["emergencyReserveController"].hasOwnProperty("isReserveSocEnabled")) {
                                      <ion-toggle mode="md" [formControlName]="'isReserveSocEnabled'"></ion-toggle>
                                    }
                                  </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>
                            @if (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>
                        @if (formGroup.value[component.id]?.["prepareBatteryExtensionController"]?.hasOwnProperty("isRunning") && isAtLeastInstaller) {
                          <ng-container [formGroupName]="'prepareBatteryExtensionController'">
                            <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>
                            @if (this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]["isRunning"]) {
                              @if (this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"] !== null) {
                                @if (this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]; as prepareBatteryExtensionController) {
                                  <!-- Debug: Reference Cycle status (visible for installer and above) -->
                                  @if (prepareBatteryExtensionController["isInReferenceCycle"]) {
                                    <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.RETROFITTING.IN_REFERENCE_CYCLE</small>
                                            </ion-text>
                                          </ion-note>
                                        </td>
                                      </tr>
                                    </table>
                                  }
                                  <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>
                                  @if (prepareBatteryExtensionController["targetTimeSpecified"] === "false" && prepareBatteryExtensionController["targetTime"] && prepareBatteryExtensionController["targetSoc"] && prepareBatteryExtensionController["targetTimeBuffer"]) {
                                    <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 [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>
                                  }
                                  @if (prepareBatteryExtensionController["targetTimeSpecified"] === "true") {
                                    <table class="full_width">
                                      <tr style="display: block; width: 75%; margin-left: 12.5%; margin-top: 2%">
                                        <td style="width: 20%; text-align: center">
                                          <ion-item button="true" id="open-date-input-{{ component.id }}">
                                            @if (prepareBatteryExtensionController["targetTime"]; as targetTime) {
                                              <ion-label style="text-align: center">
                                                {{ "EDGE.INDEX.RETROFITTING.ON_DATE_AT_TIME" | translate: { date: targetTime | date: "dd.MM.yyyy", time: targetTime | date: "HH:mm" } }}
                                              </ion-label>
                                            } @else {
                                              <ion-icon name="oe-warning" color="warning"></ion-icon>
                                              <ion-label style="text-align: center">
                                                {{ "EDGE.INDEX.RETROFITTING.SELECT_A_DATE" | translate }}
                                              </ion-label>
                                            }
                                            <ion-popover [trigger]="'open-date-input-' + component.id" 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>
                                  }
                                  @if (prepareBatteryExtensionController["targetTimeSpecified"] === "true") {
                                    <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>
                                              @if (!isTargetTimeInValid.get(component.id) && this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]["targetTimeBuffer"]) {
                                                <small [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>
                                              }
                                              @if (isTargetTimeInValid.get(component.id)) {
                                                <small [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>
                    }
                  }
                </div>
              </ion-accordion>
            }
          </ion-accordion-group>
        }
      }
      <!-- DC Charger -->
      @if (chargerComponents?.length !== 0 && essComponents?.length !== 1) {
        @for (component of chargerComponents; track component) {
          <ion-card-content [class.underline]="!isLastElement(component, chargerComponents)">
            @if ((edge.currentData | async)["channel"]; as currentData) {
              <table class="full_width">
                <ng-container>
                  @let value = currentData[component.id + "/ActualPower"];
                  @if (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>
              </table>
            }
            <!-- Show if ess has EmergencyCapacityReserveController assigned-->
            @if (formGroup.controls[component.id]) {
              <ng-container [formGroupName]="component.id">
                <ng-container [formGroupName]="'emergencyReserveController'">
                  @if (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  -->
                            @if (formGroup.controls[component.id].value["emergencyReserveController"].hasOwnProperty("isReserveSocEnabled")) {
                              <ion-toggle mode="md" [formControlName]="'isReserveSocEnabled'"> </ion-toggle>
                            }
                          </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 -->
                    @if (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>
                @if (formGroup.value[component.id]?.["prepareBatteryExtensionController"]?.hasOwnProperty("isRunning") && isAtLeastInstaller) {
                  <ng-container [formGroupName]="'prepareBatteryExtensionController'">
                    <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>
                    @if (this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]["isRunning"]) {
                      @if (controllerIsRequiredEdgeVersion) {
                        @if (this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"] !== null) {
                          @if (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>
                            @if (prepareBatteryExtensionController["targetTimeSpecified"] === "false" && prepareBatteryExtensionController["targetTime"] && prepareBatteryExtensionController["targetSoc"] && prepareBatteryExtensionController["targetTimeBuffer"]) {
                              <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 [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>
                            }
                            @if (prepareBatteryExtensionController["targetTimeSpecified"] === "true") {
                              <table class="full_width">
                                <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">
                                      @if (prepareBatteryExtensionController["targetTime"]; as targetTime) {
                                        <ion-label style="text-align: center">
                                          {{ "EDGE.INDEX.RETROFITTING.ON_DATE_AT_TIME" | translate: { date: targetTime | date: "dd.MM.yyyy", time: targetTime | date: "HH:mm" } }}
                                        </ion-label>
                                      } @else {
                                        <ion-icon name="oe-warning" color="warning"></ion-icon>
                                        <ion-label style="text-align: center">
                                          {{ "EDGE.INDEX.RETROFITTING.SELECT_A_DATE" | translate }}
                                        </ion-label>
                                      }
                                      <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>
                            }
                            @if (prepareBatteryExtensionController["targetTimeSpecified"] === "true") {
                              <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>
                                        @if (!isTargetTimeInValid.get(component.id) && this.formGroup.controls[component.id]?.value["prepareBatteryExtensionController"]["targetTimeBuffer"]) {
                                          <small 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>
                                        }
                                        @if (isTargetTimeInValid.get(component.id)) {
                                          <small
                                            [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>
                            }
                          }
                        }
                      } @else {
                        <table class="full_width" style="margin-top: 2%">
                          <tr>
                            <td>
                              <ion-text>
                                <span translate> EDGE.INDEX.RETROFITTING.UPDATE_TO_NEW_VERSION </span>
                                →
                                <a (click)="modalCtrl.dismiss()" routerLink="/device/{{ edge.id }}/settings/system" [innerHtml]="'EDGE.INDEX.SYSTEMUPDATE' | translate"></a>
                              </ion-text>
                            </td>
                          </tr>
                        </table>
                      }
                    }
                    <!-- Show only when isRunning is activated -->
                  </ng-container>
                }
              </ng-container>
            }
          </ion-card-content>
        }
      }
    </form>
  }

  @if (formGroup?.dirty) {
    <ion-fab 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>
