@if (isInitialized) {
  <oe-flat-widget [class]="storageIconStyle" [icon]="{name: 'oe-storage', color: 'success'}"
    [title]="'GENERAL.STORAGE_SYSTEM'| translate" [modalComponent]="modalComponent">
    @for (component of essComponents; track component; let i = $index) {
      <!-- Show Alias if there are more than one ESS -->
      @if (essComponents.length > 1) {
        <oe-flat-widget-line [name]="component.alias">
        </oe-flat-widget-line>
      }
      <!-- Shown if a Emergency-Capacity-Reserve-Controller is assigned to this ess -->
      @if (this.emergencyReserveComponents[component.id]; as reserve) {
        <oe-flat-widget-percentagebar [channelAddress]="component.id + '/Soc'">
          <!-- Shown if emergencyReserve is enabled for this ess -->
          @if (isEmergencyReserveEnabled[component.id]) {
            @if (reserve['currentReserveSoc']; as reserveSoc) {
              <svg>
                <rect y="2" rx="0" ry="0" width="1%" height="18"
                  [style]="'x: calc(' + (reserveSoc > 98 ? 98 : reserveSoc) + '% + 2px); fill: #0008;'" />
              </svg>
            }
          }
        </oe-flat-widget-percentagebar>
      } @else {
        <oe-flat-widget-percentagebar [channelAddress]="component.id + '/Soc'">
        </oe-flat-widget-percentagebar>
      }
      @if (!isHybridEss[component.id]) {
        <!-- For AC system: show ActivePower channel -->
        <oe-flat-widget-line [name]="'GENERAL.CHARGE' | translate" [channelAddress]="component.id + '/ActivePower'"
          [converter]="convertChargePower">
        </oe-flat-widget-line>
        <oe-flat-widget-line [name]="'GENERAL.DISCHARGE' | translate"
          [channelAddress]="component.id + '/ActivePower'" [converter]="convertDischargePower">
        </oe-flat-widget-line>
      } @else {
        <!-- For DC/hybrid system: show DcDischargePower channel -->
        <oe-flat-widget-line [name]="'GENERAL.CHARGE' | translate"
          [channelAddress]="component.id + '/DcDischargePower'" [converter]="convertChargePower">
        </oe-flat-widget-line>
        <oe-flat-widget-line [name]="'GENERAL.DISCHARGE' | translate"
          [channelAddress]="component.id + '/DcDischargePower'" [converter]="convertDischargePower">
        </oe-flat-widget-line>
      }
      @if (possibleBatteryExtensionMessage.get(component.id); as message) {
        <oe-flat-widget-horizontal-line></oe-flat-widget-horizontal-line>
        <oe-flat-widget-line [name]="message.text" leftColumnWidth="100"
        [style.color]="message.color"></oe-flat-widget-line>
      }
      <oe-flat-widget-horizontal-line [components]="essComponents" [index]="i">
      </oe-flat-widget-horizontal-line>
    }
  </oe-flat-widget>
}