@if (edge) {
  <!-- Is Edge online? -->
  @if (!edge.isOnline) {
    <!-- Edge is Restarting after Update -->
    @if (executeUpdate.isEdgeRestarting) {
      <ion-item lines="none" color="light">
        <ion-label>{{ 'SETTINGS.SYSTEM_UPDATE.EDGE_RESTARTING' | translate:
          { edge: environment.edgeShortName } }}<br />
        {{ 'SETTINGS.SYSTEM_UPDATE.UPDATE_TIME'| translate}}</ion-label>
      </ion-item>
      <ion-item lines="none" color="light">
        <ion-progress-bar type="indeterminate" style="margin-top: 1%"></ion-progress-bar>
      </ion-item>
    } @else {
      <ion-item lines="none" color="light">
        <ion-label>{{ 'SETTINGS.SYSTEM_UPDATE.OFFLINE' | translate:
          { edgeShortName: environment.edgeShortName } }}
        </ion-label>
      </ion-item>
    }
    <!-- Edge is offline -->
  } @else {
    @if (executeUpdate?.systemUpdateState; as systemUpdateState) {
      @if (isWaiting) {
        <ion-grid>
          <ion-row>
            <ion-col size="8">
              @if (systemUpdateState.unknown) {
                <!-- Update State is unknown  -->
                @if (!executeUpdate.canNotBeUpdated) {
                  <ion-item lines="none">
                    <ion-label>{{ 'SETTINGS.SYSTEM_UPDATE.UPDATE_SEARCH'| translate}}</ion-label>
                  </ion-item>
                } @else {
                  <ion-item lines="none">
                    <ion-label>{{ 'SETTINGS.SYSTEM_UPDATE.UPDATE_NOT_POSSIBLE'| translate}}
                    </ion-label>
                  </ion-item>
                }
              }
              @if (systemUpdateState.running; as state) {
                <!-- Update is running -->
                <ion-item lines="none">
                  <ion-label>{{ 'SETTINGS.SYSTEM_UPDATE.UPDATE_PROGRESS'| translate}}<br />{{
                    'SETTINGS.SYSTEM_UPDATE.UPDATE_TIME'| translate}}
                  </ion-label>
                </ion-item>
                <ion-item lines="none">
                  <oe-flat-widget-percentagebar
                  [value]="state.percentCompleted"></oe-flat-widget-percentagebar>
                </ion-item>
              }
            </ion-col>
            <ion-col>
              <div style="height: 3vh">
                <ngx-spinner [name]="spinnerId"></ngx-spinner>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
        <!-- Debug Logs -->
        @if (environment.debugMode && systemUpdateState.running; as state) {
          @if (state.logs.length > 0) {
            <div>
              <p style="cursor: pointer" (keydown.enter)="showLog = !showLog" (click)="showLog = !showLog">
                @if (!showLog) {
                  <ion-icon name="arrow-down-circle-outline">
                  </ion-icon>
                }
                @if (showLog) {
                  <ion-icon name="arrow-up-circle-outline">
                  </ion-icon>
                }
                <span>&nbsp;Details</span>
              </p>
              @if (showLog) {
                <p>
                  @for (log of state.logs; track log) {
                    <small>{{ log }}</small><br />
                  }
                </p>
              }
            </div>
          }
        }
      } @else {
        @if (systemUpdateState.updated; as state) {
          <!-- Latest update is installed -->
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-item lines="none">
                  <ion-label>{{ 'SETTINGS.SYSTEM_UPDATE.INSTALLED_VERSION'| translate}}</ion-label>
                </ion-item>
              </ion-col>
              <ion-col>
                <ion-item lines="none">
                  <ion-label>{{ state.version }}</ion-label>
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col size="12">
                <ion-item lines="none">
                  <ion-label color="success" class="ion-text-wrap">
                    {{ 'SETTINGS.SYSTEM_UPDATE.LATEST_VERISON'| translate}}
                  </ion-label>
                </ion-item>
              </ion-col>
            </ion-row>
          </ion-grid>
        }
        @if (systemUpdateState.available; as state) {
          <!-- Update is available -->
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-item lines="none">
                  <ion-label>{{ 'SETTINGS.SYSTEM_UPDATE.INSTALLED_VERSION'| translate}}</ion-label>
                </ion-item>
              </ion-col>
              <ion-col>
                <ion-item lines="none">
                  <ion-label>{{ state.currentVersion }}</ion-label>
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-item lines="none">
                  <ion-label>{{ 'SETTINGS.SYSTEM_UPDATE.NEW_VERSION'| translate}}</ion-label>
                </ion-item>
              </ion-col>
              <ion-col>
                <ion-item lines="none">
                  <ion-label>{{ state.latestVersion }}</ion-label>
                </ion-item>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col></ion-col>
              <ion-col>
                <ion-item lines="none" class="ion-float-right">
                  <ion-button (click)="confirmationAlert()">{{
                    'SETTINGS.SYSTEM_UPDATE.NEW_VERSION_INSTALLING'| translate }}
                  </ion-button>
                </ion-item>
              </ion-col>
            </ion-row>
          </ion-grid>
        }
      }
    }
  }
}