@if (edge) {
  <oe-navigation-view>
    <oe-refresh-view [refresh]="handleRefresh" [show]="showRefreshDragDown">
      <!-- SoH Status Banner Component -->
      <soh-status-banner></soh-status-banner>

      <ion-grid *ngIf="edge.isOnline" class="ion-no-padding ion-full-height">
        @if (navigationService.position() !== null && navigationService.position() !== "disabled") {
          <ion-row class="ion-justify-content-center ion-padding-top ion-full-height">
            <ion-col size-xl="2" size-lg="1" class="ion-hide-xl-down">
              <mini-weather componentId="weather0"></mini-weather>
            </ion-col>
            <!--
            On extra-large (xl): 2 - [5] - 1 - [4]
            On large (lg): 1 - [6] - [5]
            On medium (md): [7] - [5]
            On small and below: [12] / [12]
            -->
            <ion-col size-xl="5" size-lg="6" size-md="7" size="12" class="ion-margin-bottom no-margin-md-bottom live-small-padding">
              <energymonitor tabindex="0"></energymonitor>
            </ion-col>

            <ion-col size-xl="4" offset-xl="1" size-md="5" size="12" class="ion-align-self-end ion-no-padding">
              <oe-fena></oe-fena>
            </ion-col>
          </ion-row>
        } @else {
          <ion-row class="ion-justify-content-center ion-no-padding" *ngIf="widgets">
            <!-- Left column -->
            <ion-col size="12" [attr.size-lg]="isTablet ? 6 : 3" class="ion-no-padding">
              <ion-grid class="ion-no-padding">
                <ion-row>
                  <ion-col size="12">
                    <ion-card>
                      <ion-item lines="full" style="--background: var(--ion-background-color-card-header)">
                        <ion-icon size="large" slot="start" name="laptop-outline" color="normal"></ion-icon>
                        <ion-label>
                          {{ "EDGE.INDEX.ENERGYMONITOR.TITLE" | translate }}
                        </ion-label>
                      </ion-item>
                      <ion-card-content>
                        <energymonitor tabindex="0"></energymonitor>
                      </ion-card-content>
                    </ion-card>
                  </ion-col>
                </ion-row>
                <ion-row>
                  <ion-col size="12">
                    @for (widget of widgets.list; track i; let i = $index) {
                      @switch (widget.name) {
                        <!-- Systemcomponent -->
                        @case ("System.Fenecon.Industrial.S") {
                          <Industrial_S [componentId]="widget.componentId"></Industrial_S>
                        }
                        @case ("System.Fenecon.Industrial.M") {
                          <Industrial_M [componentId]="widget.componentId"></Industrial_M>
                        }
                        @case ("System.Fenecon.Industrial.L") {
                          <Industrial_L [componentId]="widget.componentId"></Industrial_L>
                        }
                        @case ("System.Fenecon.Industrial.Xl") {
                          <Industrial_Xl [componentId]="widget.componentId"></Industrial_Xl>
                        }
                        <!-- Weather-->
                        @case ("Weather.OpenMeteo") {
                          <weather [componentId]="widget.componentId" class="ion-hide-sm-down"></weather>
                        }
                      }
                    }
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-col>

            @let widgetColumnSize = isTablet ? "12" : "6";
            @let outerColumnSize = isTablet ? "6" : "6";

            <!-- Widgets -->
            <ion-col size="12" [attr.size-lg]="outerColumnSize" class="ion-no-padding">
              <ion-grid class="ion-no-padding">
                <ion-row>
                  <!-- Regular Widgets -->
                  @for (clazz of widgets.classes; track clazz) {
                    @switch (clazz) {
                      @case ("Common_Autarchy") {
                        <ion-col size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                          <Common_Autarchy></Common_Autarchy>
                        </ion-col>
                      }
                      @case ("Common_Selfconsumption") {
                        <ion-col size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                          <Common_Selfconsumption></Common_Selfconsumption>
                        </ion-col>
                      }
                      @case ("Storage") {
                        <ion-col size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                          <storage></storage>
                        </ion-col>
                      }
                      @case ("Grid") {
                        <ion-col size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                          <grid></grid>
                        </ion-col>
                      }
                      @case ("Common_Production") {
                        <ion-col size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                          <oe-common-production></oe-common-production>
                        </ion-col>
                      }
                      @case ("Consumption") {
                        <ion-col size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                          <consumption></consumption>
                        </ion-col>
                      }
                    }
                  }

                  <!-- Widgets depending on the configuration of the OpenEMS Edge -->
                  <ng-container *ngFor="let widget of widgets.list" [ngSwitch]="widget.name">
                    <!-- Widgets that are likely to be configured frequently -->
                    <ng-container *ngIf="config.components[widget.componentId].factoryId as factoryId">
                      <ng-container *ngIf="factoryId !== 'Evcs.Cluster.PeakShaving' && factoryId !== 'Evcs.Cluster.SelfConsumption'">
                        <ion-col *ngSwitchCase="'io.openems.edge.evcs.api.Evcs'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                          <Controller_Evcs [componentId]="widget.componentId"></Controller_Evcs>
                        </ion-col>
                      </ng-container>
                    </ng-container>

                    <ion-col *ngSwitchCase="'Evcs.Cluster.SelfConsumption'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <oe-multiple-evcs-api-cluster [componentId]="widget.componentId"></oe-multiple-evcs-api-cluster>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Evcs.Cluster.PeakShaving'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <oe-multiple-evcs-api-cluster [componentId]="widget.componentId"></oe-multiple-evcs-api-cluster>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.ChannelThreshold'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Channelthreshold [componentId]="widget.componentId"></Controller_Channelthreshold>
                    </ion-col>

                    <ion-col *ngSwitchCase="'io.openems.impl.controller.channelthreshold.ChannelThresholdController'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Channelthreshold [componentId]="widget.componentId"></Controller_Channelthreshold>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.Io.FixDigitalOutput'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <oe-controller-io-fix-digital-output [componentId]="widget.componentId"></oe-controller-io-fix-digital-output>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.Api.ModbusTcp.ReadWrite'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Api_ModbusTcp [componentId]="widget.componentId"></Controller_Api_ModbusTcp>
                    </ion-col>

                    <!-- Widgets that are likely to be configured seldomly -->
                    <ion-col *ngSwitchCase="'Controller.CHP.SoC'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_ChpSocComponent [componentId]="widget.componentId"></Controller_ChpSocComponent>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.IO.HeatingElement'" size="12" size-lg="6" class="ion-no-padding">
                      <oe-controller-io-heating-element [componentId]="widget.componentId"></oe-controller-io-heating-element>
                    </ion-col>

                    <ion-col size="12" *ngSwitchCase="'Heat.Askoma'" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <oe-controller-heat [componentId]="widget.componentId"></oe-controller-heat>
                    </ion-col>

                    <ion-col size="12" *ngSwitchCase="'Heat.MyPv.AcThor9s'" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <oe-controller-heat [componentId]="widget.componentId"></oe-controller-heat>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.Io.HeatPump.SgReady'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <oe-controller-io-heatpump [componentId]="widget.componentId"></oe-controller-io-heatpump>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.Symmetric.PeakShaving'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Symmetric_PeakShaving [componentId]="widget.componentId"> </Controller_Symmetric_PeakShaving>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.Asymmetric.PeakShaving'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Asymmetric_PeakShaving [componentId]="widget.componentId"> </Controller_Asymmetric_PeakShaving>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.TimeslotPeakshaving'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Symmetric_TimeSlot_PeakShaving [componentId]="widget.componentId"> </Controller_Symmetric_TimeSlot_PeakShaving>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.Ess.DelayedSellToGrid'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <delayedselltogrid [componentId]="widget.componentId"></delayedselltogrid>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.IO.ChannelSingleThreshold'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <oe-controller-io-channelsinglethreshold [componentId]="widget.componentId"></oe-controller-io-channelsinglethreshold>
                    </ion-col>

                    <ion-col *ngSwitchCase="'Controller.Ess.Time-Of-Use-Tariff'" size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Ess_TimeOfUseTariff [componentId]="widget.componentId"></Controller_Ess_TimeOfUseTariff>
                    </ion-col>

                    <ion-col *ngSwitchCase="'io.openems.edge.io.api.DigitalInput'" size="12" [attr.size-lg]="widgetColumnSize"  class="ion-no-padding">
                      <Io_Api_DigitalInput></Io_Api_DigitalInput>
                    </ion-col>

                    <ion-col size="12" *ngSwitchCase="'Controller.Clever-PV'" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_EnerixControl [componentId]="widget.componentId"></Controller_EnerixControl>
                    </ion-col>

                    <ion-col size="12" *ngSwitchCase="'Controller.Ess.FixActivePower'" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Ess_FixActivePower [componentId]="widget.componentId"></Controller_Ess_FixActivePower>
                    </ion-col>

                    <ion-col size="12" *ngSwitchCase="'Controller.Ess.GridOptimizedCharge'" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <Controller_Ess_GridOptimizedCharge [componentId]="widget.componentId"> </Controller_Ess_GridOptimizedCharge>
                    </ion-col>

                    <ion-col size="12" *ngSwitchCase="'Weather.OpenMeteo'" [attr.size-lg]="widgetColumnSize" class="ion-hide-sm-up ion-no-padding">
                      <weather [componentId]="widget.componentId"></weather>
                    </ion-col>
                  </ng-container>

                  @if (advertWidgets?.length > 0) {
                    <ion-col size="12" [attr.size-lg]="widgetColumnSize" class="ion-no-padding">
                      <advertisement [advertWidgets]="advertWidgets" tabindex="0"></advertisement>
                    </ion-col>
                  }
                </ion-row>
              </ion-grid>
            </ion-col>
          </ion-row>
        }
      </ion-grid>

      @if (edge.isOnline && !edge.subscribeChannelsSuccessful) {
        <ion-grid>
          <ion-progress-bar type="indeterminate"></ion-progress-bar>
        </ion-grid>
      }

      @if (!edge.isOnline) {
        <ion-grid>
          <ion-row class="ion-justify-content-center">
            <ion-col size-xl="8" size-md="10" size-md="11" size-sm="12">
              <oe-offline></oe-offline>
            </ion-col>
          </ion-row>
        </ion-grid>
      }
    </oe-refresh-view>
  </oe-navigation-view>
}