<ion-content>
  @if (config) {
    <ion-grid>
      <ion-row class="ion-justify-content-center">
        @if (edge) {
          <ion-col size="12" size-md="8">
            <ion-card>
              <ion-item color="light" lines="full">
                <ion-icon slot="start" name="today-outline" color="primary"></ion-icon>
                <ion-label>{{ "EDGE.CONFIG.INDEX.GENERAL_DATA" | translate }}</ion-label>
              </ion-item>
              <ion-card-content>
                <ion-list class="ion-font-size-small">
                  @if (environment.backend === "OpenEMS Backend") {
                    <ion-item>
                      <ion-label>Edge-ID</ion-label>
                      {{ edge.id }}
                    </ion-item>
                  }
                  @if (edge.comment) {
                    <ion-item>
                      <ion-label>{{ "EDGE.CONFIG.INDEX.COMMENT" | translate }}</ion-label>
                      {{ edge.comment }}
                    </ion-item>
                  }
                  @if (edge.producttype) {
                    <ion-item>
                      <ion-label>{{ "EDGE.CONFIG.INDEX.PRODUCT_TYPE" | translate }}</ion-label>
                      {{ edge.producttype }}
                    </ion-item>
                  }
                  <ion-item>
                    <ion-label style="white-space: initial">{{ environment.edgeShortName }} Version</ion-label>
                    <a class="ion-link" style="white-space: initial; display: inline-block; max-width: 50%; text-align: right" routerLinkActive="active" (keydown.enter)="navigateToChangelog($event)" (click)="navigateToChangelog($event)">{{ edge.version | version: edge.role }}</a>
                  </ion-item>
                  <ion-item>
                    <ion-label>{{ "EDGE.CONFIG.INDEX.ROLE" | translate }}</ion-label>
                    {{ edge.getRoleString() }}
                  </ion-item>
                  @if (edge.firstSetupProtocol) {
                    <ion-item lines="none">
                      <ion-label>{{ "INDEX.FIRST_SETUP_PROTOCOL" | translate }}</ion-label>
                      {{ edge.firstSetupProtocol | date: "dd.MM.yyyy HH:mm" }}
                    </ion-item>
                  }
                </ion-list>
              </ion-card-content>
            </ion-card>
          </ion-col>
        }
      </ion-row>
      @if (edge.firstSetupProtocol && isAtLeastOwner) {
        <ion-row class="ion-justify-content-center">
          <ion-col size="12" size-md="8">
            <ion-card>
              <ion-item color="light" lines="full">
                <ion-icon name="document-text-outline" slot="start" color="primary"></ion-icon>
                <ion-label>{{ "PROFILE.SYSTEM_PROTOCOL.TITLE" | translate }}</ion-label>
              </ion-item>
              <ion-card-content class="ion-padding ion-font-size-larger">
                <ion-grid class="ion-padding">
                  @if (latestSetupProtocolData) {
                    <ion-row class="ion-align-items-center">
                      <ion-col size-md="4" size-xs="6">
                        <ion-label style="color: var(--ion-color-label)">
                          {{ "PROFILE.SYSTEM_PROTOCOL.LABEL" | translate }}
                        </ion-label>
                      </ion-col>
                      <ion-col size-md="4" size-xs="6" class="ion-text-align-end ion-text-md-center">
                        <ion-label style="color: var(--ion-color-label)">
                          {{ latestSetupProtocolData.createDate | date: "dd.MM.yyyy HH:mm" }}
                        </ion-label>
                      </ion-col>
                      <ion-col size-md="4" class="ion-text-align-end" size-xs="12">
                        <ngx-spinner [name]="spinnerId"></ngx-spinner>
                        @if (!isLoading()) {
                          <ion-button size="small" (click)="downloadLatestSetupProtocol()">
                            <ion-label>
                              {{ "PROFILE.SYSTEM_PROTOCOL.DOWNLOAD" | translate }}
                            </ion-label>
                            <ion-icon name="download-outline" slot="start"></ion-icon>
                          </ion-button>
                        }
                      </ion-col>
                    </ion-row>
                  }
                </ion-grid>
              </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
      }
      <oe-settings-profile-location></oe-settings-profile-location>
      <ion-row class="ion-justify-content-center">
        @if (components !== null) {
          <ion-col size="12" size-md="8">
            <ion-card>
              <ion-item color="light" lines="full">
                <ion-icon slot="start" name="today-outline" color="primary"></ion-icon>
                <ion-label>{{ "EDGE.CONFIG.INDEX.CONFIGURATION" | translate }}</ion-label>
              </ion-item>
              <ion-card-content>
                <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) {
                      <ion-item lines="none">
                        <ion-label class="ion-text-wrap">
                          <ion-text>
                            <ion-text color="primary">
                              <h3>
                                {{ item.alias }}
                                @if (edge.roleIsAtLeast("owner")) {
                                  <a button tabindex="0" style="cursor: pointer" [routerLink]="['alias-update', item.id]">
                                    <ion-icon name="create-outline"></ion-icon>
                                  </a>
                                }
                              </h3>
                            </ion-text>
                            @if (config.factories[item.factoryId]; as factory) {
                              <p style="cursor: pointer" button tabindex="0" (keydown.enter)="item['showProperties'] = !item['showProperties']" (click)="item['showProperties'] = !item['showProperties']" class="ion-font-size-smaller">
                                @if (!item["showProperties"]) {
                                  <ion-icon name="arrow-down-circle-outline"> </ion-icon>
                                }
                                @if (item["showProperties"]) {
                                  <ion-icon name="arrow-up-circle-outline"> </ion-icon>
                                }
                                <span>&nbsp;{{ item.id }}</span
                                >&nbsp;<span style="color: gray">{{ factory.name }}</span>
                                @if (!item.isEnabled) {
                                  <span> - <span translate>GENERAL.COMPONENT_INACTIVE</span></span>
                                }
                              </p>
                            }
                          </ion-text>
                          @if (item["showProperties"]) {
                            <!-- Component details -->
                            <ul style="font-family: monospace; list-style-type: square">
                              @for (p of item.properties | keys; track p) {
                                @if (!["alias", "_lastChangeBy", "_lastChangeAt", "enabled", ":org.apache.felix.configadmin.revision:"].includes(p.key) && !p.key.endsWith(".target")) {
                                  <li>{{ p.key }}: {{ p.value }}</li>
                                }
                              }
                            </ul>
                            <!-- Additional information for specific Factory-IDs -->
                            @for (factoryId of [item.factoryId]; track factoryId) {
                              @switch (factoryId) {
                                @case ("Controller.Api.ModbusTcp.ReadOnly") {
                                  <ion-text>
                                    <ion-button (click)="getModbusProtocol(item.id, 'tcp')">
                                      <ion-icon slot="start" [name]="'download-outline'"> </ion-icon>
                                      {{ "MODBUS_TCP_API_READ_WRITE.DOWNLOAD_PROTOCOL" | translate }}
                                    </ion-button>
                                    <oe-help-button key="REDIRECT.CONTROLLER_API_MODBUSTCP_READ">
                                      <span translate> GENERAL.MANUAL </span>
                                    </oe-help-button>
                                  </ion-text>
                                }
                                @case ("Controller.Api.ModbusRtu.ReadOnly") {
                                  <ion-text>
                                    <ion-button (click)="getModbusProtocol(item.id, 'rtu')">
                                      <ion-icon slot="start" [name]="'download-outline'"> </ion-icon>
                                      {{ "MODBUS_TCP_API_READ_WRITE.DOWNLOAD_PROTOCOL" | translate }}
                                    </ion-button>
                                  </ion-text>
                                }
                                @case ("Controller.Api.ModbusTcp.ReadWrite") {
                                  <ion-text>
                                    <ion-button (click)="getModbusProtocol(item.id, 'tcp')">
                                      <ion-icon slot="start" [name]="'download-outline'"> </ion-icon>
                                      {{ "MODBUS_TCP_API_READ_WRITE.DOWNLOAD_PROTOCOL" | translate }}
                                    </ion-button>
                                    <oe-help-button key="REDIRECT.CONTROLLER_API_MODBUSTCP_READWRITE">
                                      <span translate> GENERAL.MANUAL </span>
                                    </oe-help-button>
                                  </ion-text>
                                }
                                @case ("Controller.Api.ModbusRtu.ReadWrite") {
                                  <ion-text>
                                    <ion-button (click)="getModbusProtocol(item.id, 'rtu')">
                                      <ion-icon slot="start" [name]="'download-outline'"> </ion-icon>
                                      {{ "MODBUS_TCP_API_READ_WRITE.DOWNLOAD_PROTOCOL" | translate }}
                                    </ion-button>
                                  </ion-text>
                                }
                                @case ("Controller.Api.Rest.ReadOnly") {
                                  <ion-text>
                                    <oe-help-button key="CONTROLLER_API_REST_READ">
                                      <span translate> GENERAL.MANUAL </span>
                                    </oe-help-button>
                                  </ion-text>
                                }
                                @case ("Controller.Api.Rest.ReadWrite") {
                                  <ion-text>
                                    <oe-help-button key="CONTROLLER_API_REST_READWRITE">
                                      <span translate> GENERAL.MANUAL </span>
                                    </oe-help-button>
                                  </ion-text>
                                }
                              }
                            }
                            <!-- Additional information for all Components -->
                            @if (edge.roleIsAtLeast("admin")) {
                              <ion-button (click)="getChannelExport(item.id)">
                                <ion-icon slot="start" [name]="'download-outline'"></ion-icon>
                                {{ "EDGE.CONFIG.INDEX.EXPORT_CHANNELS" | translate }}</ion-button
                              >
                            }
                          }
                        </ion-label>
                      </ion-item>
                    }
                  }
                </ion-list>
              </ion-card-content>
            </ion-card>
          </ion-col>
        }
      </ion-row>
    </ion-grid>
  }
</ion-content>
