<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.DIGITAL_INPUTS</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="modalCtrl.dismiss()">
        <ion-icon name="close-outline" style="color: var(--ion-title-color);"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  @if (service.currentEdge(); as edge) {
    @if ((edge.currentData | async)['channel']; as currentData) {
      @for (channelsPerComponent of digitalInputChannelsPerComponent; track channelsPerComponent) {
        <ion-card-content>
          <table class="full_width">
            <tr class="underline">
              <td style="width: 100%;">{{ channelsPerComponent.componentAlias}}</td>
            </tr>
            @for (channel of channelsPerComponent.channels; track channel) {
              <tr>
                <td style="width:65%">{{ channel.id }}</td>
                <td style="width:36%" class="align_right">
                  @if (currentData[channelsPerComponent.componentId + '/' + channel.id] === 0) {
                    <ion-icon name="radio-button-off"
                      >
                    </ion-icon>
                  } @else {
                    <ion-icon name="radio-button-on"></ion-icon>
                  }
                </td>
              </tr>
            }
          </table>
        </ion-card-content>
      }
    }
  }
</ion-content>