<ion-header>
  <ion-toolbar class="ion-justify-content-center" style="--background: var(--ion-color-toolbar-primary); color: var(--ion-title-color)">
    <ion-title>{{ component?.alias }}</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 (!loading) {
    <form [formGroup]="formGroup">
      <ion-card-content>
        <ion-row>
          <ion-col>
            <ion-label>{{ "EDGE.HISTORY.MON" | translate }}</ion-label>
            <ion-checkbox formControlName="monday"></ion-checkbox>
          </ion-col>
          <ion-col>
            <ion-label>{{ "EDGE.HISTORY.TUE" | translate }}</ion-label>
            <ion-checkbox formControlName="tuesday"></ion-checkbox>
          </ion-col>
          <ion-col>
            <ion-label>{{ "EDGE.HISTORY.WED" | translate }}</ion-label>
            <ion-checkbox formControlName="wednesday"></ion-checkbox>
          </ion-col>
          <ion-col>
            <ion-label>{{ "EDGE.HISTORY.THU" | translate }}</ion-label>
            <ion-checkbox formControlName="thursday"></ion-checkbox>
          </ion-col>
          <ion-col>
            <ion-label>{{ "EDGE.HISTORY.FRI" | translate }}</ion-label>
            <ion-checkbox formControlName="friday"></ion-checkbox>
          </ion-col>
          <ion-col>
            <ion-label>{{ "EDGE.HISTORY.SAT" | translate }}</ion-label>
            <ion-checkbox formControlName="saturday"></ion-checkbox>
          </ion-col>
          <ion-col>
            <ion-label>{{ "EDGE.HISTORY.SUN" | translate }}</ion-label>
            <ion-checkbox formControlName="sunday"></ion-checkbox>
          </ion-col>
        </ion-row>
      </ion-card-content>
      @if ((edge.currentData | async)["channel"]; as currentData) {
        <ion-card-content class="underline">
          @if (component.properties["meter.id"]; as meterId) {
            <table class="full_width">
              <tr>
                <td style="width: 65%" translate>GENERAL.MEASURED_VALUE</td>
                <td style="width: 35%" class="align_right">
                  @if (currentData[meterId + "/ActivePower"] || true; as value) {
                    {{ (value >= 0 ? value : 0) | unitvalue: "W" }}
                  }
                </td>
              </tr>
            </table>
          }
        </ion-card-content>
      }
      <ion-card-content class="underline">
        <table class="full_width">
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.PEAKSHAVING_POWER</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="number" formControlName="peakShavingPower" style="text-align: end" label="&nbsp;W"></ion-input>
              </ion-item>
            </td>
          </tr>
        </table>
        <table class="full_width">
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.RECHARGE_POWER</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="number" formControlName="rechargePower" style="text-align: end" label="&nbsp;W"></ion-input>
              </ion-item>
            </td>
          </tr>
        </table>
        <table class="full_width">
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.HYSTERESIS_SO_C</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="number" formControlName="hysteresisSoc" style="text-align: end" label="&nbsp;%"></ion-input>
              </ion-item>
            </td>
          </tr>
        </table>
      </ion-card-content>
      <ion-card-content class="underline">
        <table class="full_width">
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.START_DATE</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="text" formControlName="startDate" style="text-align: end"></ion-input>
              </ion-item>
            </td>
          </tr>
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.END_DATE</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="text" formControlName="endDate" style="text-align: end"></ion-input>
              </ion-item>
            </td>
          </tr>
        </table>
      </ion-card-content>
      <ion-card-content class="underline">
        <table class="full_width">
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.START_TIME</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="text" formControlName="startTime" style="text-align: end"></ion-input>
              </ion-item>
            </td>
          </tr>
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.END_TIME</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="text" formControlName="endTime" style="text-align: end"></ion-input>
              </ion-item>
            </td>
          </tr>
        </table>
      </ion-card-content>
      <ion-card-content class="underline">
        <table class="full_width">
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.RECHARGE</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="number" formControlName="slowChargePower" style="text-align: end" label="&nbsp;W"></ion-input>
              </ion-item>
            </td>
          </tr>
          <tr>
            <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.PEAKSHAVING.START_TIME_CHARGE</td>
            <td style="width: 35%" class="align_right">
              <ion-item lines="inset" class="noPadding">
                <ion-input class="regularFont" type="text" formControlName="slowChargeStartTime" style="text-align: end"></ion-input>
              </ion-item>
            </td>
          </tr>
        </table>
      </ion-card-content>
    </form>
  }
  @if (formGroup.dirty) {
    <ion-fab class="ion-padding-bottom" vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button (click)="applyChanges()">
        <ion-icon size="large" name="oe-checkmark"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  }
  @if (loading === true) {
    <ion-grid>
      <ion-progress-bar type="indeterminate"></ion-progress-bar>
    </ion-grid>
  }
</ion-content>
