<ion-header>
  <ion-toolbar class="ion-justify-content-center"
    style="--background: var(--ion-color-toolbar-primary); color: var(--ion-title-color);">
    <ion-title translate>GENERAL.SYSTEM_STATE</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="modalCtrl.dismiss()">
        <ion-icon name="close" style="color: var(--ion-title-color);"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
@if (edge && components) {
  @if (edge.currentData | async; as currentData) {
    <ion-content>
      <ion-card-content>
        @if (currentData.summary.system; as sum) {
          <ion-item lines="full">
            <ion-icon color="primary" name="analytics-outline"></ion-icon>
            <ion-label class="ion-padding-start">
              {{"GENERAL.TOTAL_STATE" | translate}}
            </ion-label>
            @switch (sum.state) {
              @case (0) {
                <ion-icon color="success" name="oe-checkmark"></ion-icon>
              }
              @case (1) {
                <ion-icon color="success" name="oe-info"></ion-icon>
              }
              @case (2) {
                <ion-icon color="warning" name="oe-warning"></ion-icon>
              }
              @case (3) {
                <ion-icon color="danger" name="oe-error"></ion-icon>
              }
            }
          </ion-item>
        }
        <ion-list>
          @for (category of components; track category) {
            <ion-item-group>
              <ion-item lines="inset">
                <ion-icon class="normal-icon" name="{{ category.category.icon }}"></ion-icon>
                <ion-label class="ion-padding-start">
                  {{category.category.title}}
                </ion-label>
              </ion-item>
            </ion-item-group>
            @for (item of category.components; track item) {
              @if (item.id !== '_sum') {
                <ion-item lines="none">
                  <ion-label class="ion-text-wrap">
                    <ion-text color="primary">
                      <h3>{{ item.alias }}
                        @if (item.id !== item.alias) {
                          <span> {{ item.id }}</span>
                        }
                        @if (!item.isEnabled) {
                          <small> (<span translate>GENERAL.COMPONENT_INACTIVE</span>) </small>
                        }
                      </h3>
                    </ion-text>
                    @if (config.factories[item.factoryId]; as factory) {
                      <p class="custom-channels-text">{{ factory.name }}</p>
                    }
                    @if (item['showProperties']) {
                      @for (address of subscribedInfoChannels; track address) {
                        @if (address.componentId === item.id && address.channelId !== 'State') {
                          @if (currentData.channel[address.toString()] === 1) {
                            <!-- State-Channel is active -->
                            <ion-label class="ion-text-wrap">
                              @switch (channels[address.componentId][address.channelId].level) {
                                @case ('INFO') {
                                  <ion-text color="success" translate>
                                    GENERAL.INFO&nbsp;
                                  </ion-text>
                                }
                                @case ('WARNING') {
                                  <ion-text color="warning" translate>
                                    GENERAL.WARNING&nbsp;
                                  </ion-text>
                                }
                                @case ('FAULT') {
                                  <ion-text color="danger" translate>
                                    GENERAL.FAULT&nbsp;
                                  </ion-text>
                                }
                              }
                              @if (channels[address.componentId][address.channelId].text.length > 0) {
                                <ion-text>
                                  {{ channels[address.componentId][address.channelId].text }}
                                </ion-text>
                              } @else {
                                {{ address.channelId.toString() }}
                              }
                            </ion-label>
                          }
                        }
                      }
                    }
                  </ion-label>
                  @if ((currentData.channel[item.id+'/State'] ?? -1) > 0 && !item['showProperties']) {
                    <ion-icon style="cursor: pointer" name="arrow-down-circle-outline" color="primary"
                      (click)="item['showProperties'] = !item['showProperties']; subscribeInfoChannels(item)">
                    </ion-icon>
                  }
                  @if (item['showProperties']) {
                    <ion-icon style="cursor: pointer" name="arrow-up-circle-outline" color="primary"
                      (click)="item['showProperties'] = !item['showProperties']; unsubscribeInfoChannels(item)">
                    </ion-icon>
                  }
                  @switch (currentData.channel[item.id+'/State']) {
                    @case (0) {
                      <ion-icon color="success" name="oe-checkmark">
                      </ion-icon>
                    }
                    @case (1) {
                      <ion-icon color="success" name="oe-info"></ion-icon>
                    }
                    @case (2) {
                      <ion-icon color="warning" name="oe-warning"></ion-icon>
                    }
                    @case (3) {
                      <ion-icon color="danger" name="oe-error"></ion-icon>
                    }
                  }
                </ion-item>
              }
            }
          }
        </ion-list>
      </ion-card-content>
    </ion-content>
  }
}
