@if (isInitialized) {
  <oe-modal [title]="this.component.alias" [component]="component" [formGroup]="formGroup" helpKey="REDIRECT.CONTROLLER_IO_HEATING_ELEMENT" useDefaultPrefix="false">
    <oe-modal-line [name]="'GENERAL.STATE' | translate" [value]="runState" [converter]="CONVERT_HEATING_ELEMENT_RUNSTATE"> </oe-modal-line>
    @if (level !== Level.LEVEL_0) {
      <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.HEATINGELEMENT.ACTIVE_LEVEL' | translate" [value]="'Level ' + level"> </oe-modal-line>
    }
    @if (consumptionMeter) {
      <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.HEATINGELEMENT.HEATING_POWER' | translate" [channelAddress]="consumptionMeter.id + '/ActivePower'" [converter]="Utils.CONVERT_WATT_TO_KILOWATT"> </oe-modal-line>
      <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.HEATINGELEMENT.ENERGY_SINCE_BEGINNING' | translate" [channelAddress]="component.id + '/SessionEnergy'" [converter]="Utils.CONVERT_TO_KILO_WATTHOURS"> </oe-modal-line>
    }
    <oe-modal-horizontal-line></oe-modal-horizontal-line>
    <oe-modal-line [name]="'GENERAL.MODE' | translate"></oe-modal-line>
    <oe-modal-buttons
      [formGroup]="formGroup"
      controlName="mode"
      [component]="component"
      [buttons]="[
        { name: ('GENERAL.ON' | translate), value: 'MANUAL_ON', icon: { color: 'success', name: 'play-outline' } },
        { name: ('GENERAL.AUTOMATIC' | translate), value: 'AUTOMATIC', icon: { color: 'primary', name: 'sunny' } },
        { name: ('GENERAL.OFF' | translate), value: 'MANUAL_OFF', icon: { color: 'danger', name: 'power' } },
      ]"
    >
    </oe-modal-buttons>
    <!-- TODO: with future version there will be a solution for returning the event from the generic modal-line, but at this moment, CustomEvent not working -->
    @if (formGroup.controls["mode"].value === Mode.AUTOMATIC) {
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      <table class="full_width">
        <tr>
          <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.HEATINGELEMENT.GUARANTEE_MINIMUM_HEATING</td>
          <td style="width: 35%" class="align_right">
            <ion-toggle (ionChange)="switchWorkMode($event, 'TIME')" [checked]="formGroup.controls['workMode'].value === WorkMode.TIME"> </ion-toggle>
          </td>
        </tr>
      </table>
    }
    @if (formGroup.controls["mode"].value === Mode.MANUAL_ON || (formGroup.controls["mode"].value === Mode.AUTOMATIC && formGroup.controls["workMode"].value === WorkMode.TIME)) {
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      <oe-modal-line
        [control]="{
          type: 'SELECT',
          options: [
            { value: 'LEVEL_1', name: 'Level 1' },
            { value: 'LEVEL_2', name: 'Level 2' },
            { value: 'LEVEL_3', name: 'Level 3' },
          ],
        }"
        name="Level"
        controlName="defaultLevel"
        [formGroup]="formGroup"
      >
      </oe-modal-line>
    }
    @if (formGroup.controls["workMode"].value === WorkMode.TIME && formGroup.controls["mode"].value === Mode.AUTOMATIC) {
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      <table style="width: 100%">
        <tr>
          <td class="text-align: left"><ion-text translate> EDGE.INDEX.WIDGETS.GRID_OPTIMIZED_CHARGE.END_TIME </ion-text>:</td>
          <td>
            @if (formGroup) {
              <ion-item button="true" id="open-date-input" style="text-align: center">
                <ion-label> {{ this.formGroup.controls["endTime"].value }} </ion-label>
                <ion-popover trigger="open-date-input" show-backdrop="false" slot="end">
                  <ng-template>
                    <ion-datetime #popoverDatetime presentation="time" displayFormat="HH:mm" formControlName="endTime"></ion-datetime>
                  </ng-template>
                </ion-popover>
              </ion-item>
            }
          </td>
        </tr>
      </table>
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.HEATINGELEMENT.MINIMUM_RUN_TIME' | translate" [value]="formGroup.controls['minTime'].value + ' h'"> </oe-modal-line>
      <oe-modal-line controlName="minTime" [control]="{ type: 'RANGE', properties: { tickMin: 1, tickMax: 10, unit: 'H', pinFormatter: pinFormatterTime, snaps: true } }" [formGroup]="formGroup"> </oe-modal-line>
    }
    @if (formGroup.controls["mode"].value === Mode.AUTOMATIC && consumptionMeter && consumptionMeter.isEnabled) {
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      <table class="full_width">
        <tr>
          <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.HEATINGELEMENT.GUARANTEE_HEATING</td>
          <td style="width: 35%" class="align_right">
            <ion-toggle (ionChange)="switchWorkMode($event, 'ENERGY')" [checked]="formGroup.controls['workMode'].value === WorkMode.ENERGY"> </ion-toggle>
          </td>
        </tr>
      </table>
    }
    @if (formGroup.controls["mode"].value === Mode.AUTOMATIC && formGroup.controls["workMode"].value === WorkMode.ENERGY && consumptionMeter && consumptionMeter.isEnabled) {
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.HEATINGELEMENT.MINIMAL_ENERGY_LIMIT' | translate" [value]="formGroup.controls['minEnergyLimitInKwh'].value + ' kWh'"> </oe-modal-line>
      <oe-modal-line controlName="minEnergyLimitInKwh" [control]="{ type: 'RANGE', properties: { tickMin: 1, tickMax: maxPower, unit: 'kWh ', pinFormatter: pinFormatterEnergy, snaps: true } }" [formGroup]="formGroup"> </oe-modal-line>
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      <table style="width: 100%">
        <tr>
          <td class="text-align: left"><ion-text translate> EDGE.INDEX.WIDGETS.HEATINGELEMENT.ENDTIME </ion-text>:</td>
          <td>
            @if (formGroup) {
              <ion-item button="true" id="open-date-input" style="text-align: center">
                <ion-label> {{ this.formGroup.controls["endTimeWithMeter"].value }} </ion-label>
                <ion-popover trigger="open-date-input" show-backdrop="false" slot="end">
                  <ng-template>
                    <ion-datetime #popoverDatetime presentation="time" displayFormat="HH:mm" formControlName="endTimeWithMeter"></ion-datetime>
                  </ng-template>
                </ion-popover>
              </ion-item>
            }
          </td>
        </tr>
      </table>
      @if (isUnreachable) {
        <div style="text-align: center; margin-top: 5px">
          <ion-text color="danger" translate> EDGE.INDEX.WIDGETS.HEATINGELEMENT.MESSAGE_UNREACHABLE </ion-text>
        </div>
      }
    }
  </oe-modal>
}