<ion-header>
  <ion-toolbar style="--background: var(--ion-color-toolbar-primary); color: var(--ion-title-color)">
    <ion-title>{{ component.alias }}</ion-title>
    <ion-buttons slot="end">
      <oe-help-button key="REDIRECT.CONTROLLER_CHP_SOC" useDefaultPrefix="false"></oe-help-button>
      <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 (edge.currentData | async; as currentData) {
    <ion-card-content class="underline">
      <table class="full_width">
        <tr>
          <td translate>GENERAL.MODE</td>
        </tr>
      </table>
      <!-- ngIf prevents ionChange to trigger on init -->
      @if (component) {
        <ion-segment (ionChange)="updateMode($event)" value="{{ component.properties['mode'] }}" scrollable="false">
          <ion-segment-button value="MANUAL_ON">
            <ion-label>
              {{ "GENERAL.ON" | translate }}
            </ion-label>
            <ion-icon [color]="component.properties['mode'] === 'MANUAL_ON' ? 'success' : 'normal'" style="width: 40px" name="play-outline"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="AUTOMATIC">
            <ion-label>
              {{ "GENERAL.AUTOMATIC" | translate }}
            </ion-label>
            <ion-icon style="width: 40px" name="sunny-outline" [color]="component.properties['mode'] === 'AUTOMATIC' ? 'primary' : 'normal'"> </ion-icon>
          </ion-segment-button>
          <ion-segment-button value="MANUAL_OFF">
            <ion-label>
              {{ "GENERAL.OFF" | translate }}
            </ion-label>
            <ion-icon name="power-outline" style="width: 40px" [color]="component.properties['mode'] === 'MANUAL_OFF' ? 'danger' : 'normal'"></ion-icon>
          </ion-segment-button>
        </ion-segment>
      }
    </ion-card-content>
    @if (component.properties["mode"] === "AUTOMATIC" && edge.roleIsAtLeast("owner")) {
      <ion-card-content class="underline">
        <table class="full_width">
          <tr>
            <td style="width: 65%" translate>GENERAL.SOC</td>
            <td style="width: 35%" class="align_right">
              {{ currentData.channel[inputChannel] | unitvalue: "%" }}
            </td>
          </tr>
          <div style="padding-top: 5px"></div>
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.CHP.HIGH_THRESHOLD</td>
            <td style="width: 35%" class="align_right">
              {{ component.properties["highThreshold"] | unitvalue: "%" }}
            </td>
          </tr>
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.CHP.LOW_THRESHOLD</td>
            <td style="width: 35%" class="align_right">
              {{ component.properties["lowThreshold"] | unitvalue: "%" }}
            </td>
          </tr>
        </table>
        <table class="full_width">
          <tr>
            <ion-range (ionChange)="updateThresholds()" dual-knobs pin color="dark" min="0" max="100" [(ngModel)]="thresholds" debounce="500">
              <ion-label slot="start">
                {{ 0 | unitvalue: "%" }}
              </ion-label>
              <ion-label slot="end">
                {{ 100 | unitvalue: "%" }}
              </ion-label>
            </ion-range>
          </tr>
        </table>
      </ion-card-content>
    }
    <ion-card-content>
      <table class="full_width">
        <tr>
          <td style="width: 65%" translate>GENERAL.STATE</td>
          <td style="width: 35%" class="align_right">
            @switch (currentData.channel[outputChannel]) {
              @case (1) {
                <span translate>GENERAL.ACTIVE</span>
              }
              @case (0) {
                <span translate>GENERAL.INACTIVE</span>
              }
              @default {
                <ion-icon name="help-outline"></ion-icon>
              }
            }
          </td>
        </tr>
      </table>
    </ion-card-content>
  }
</ion-content>
