@if (isInitialized && formGroup) {
  <oe-modal [title]="component.alias" [component]="component" [formGroup]="formGroup"
    helpKey="CONTROLLER_ESS_TIME_OF_USE_TARIFF">
    <!-- Discharge State -->
    <oe-modal-line [name]="'GENERAL.STATUS' | translate" [converter]="CONVERT_TIME_OF_USE_TARIFF_STATE"
    [channelAddress]="component.id + '/StateMachine'"></oe-modal-line>
    <!-- Price -->
    <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.TIME_OF_USE_TARIFF.PRICE' | translate"
    [value]="priceWithCurrency"></oe-modal-line>
    <oe-modal-horizontal-line></oe-modal-horizontal-line>
    <!--Select Mode-->
    <oe-modal-line [name]="'GENERAL.MODE'| translate"></oe-modal-line>
    <oe-modal-buttons [formGroup]="formGroup" controlName="mode" [component]="component" [buttons]="[
        { name: ('GENERAL.AUTOMATIC' | translate), value: 'AUTOMATIC', icon: {color:'primary', name: 'sunny'}},
        { name: ('GENERAL.OFF' | translate), value: 'OFF', icon: {color:'danger', name: 'power'}}]">
    </oe-modal-buttons>
    @if (component.factoryId  === 'Controller.Ess.Time-Of-Use-Tariff') {
      <!-- AUTOMATIC Mode -->
      @if (formGroup.value.mode === 'AUTOMATIC') {
        <oe-modal-horizontal-line></oe-modal-horizontal-line>
        <oe-modal-info-line
        [info]="'EDGE.INDEX.WIDGETS.TIME_OF_USE_TARIFF.CHART_TITLE'| translate"></oe-modal-info-line>
        <statePriceChart class="ion-padding" [refresh]="refreshChart" [component]="component" [edge]="edge">
        </statePriceChart>
        <oe-modal-info-line [info]="'EDGE.INDEX.WIDGETS.TIME_OF_USE_TARIFF.CHART_WARNING_NOTE' | translate"
        style="font-size: small;"></oe-modal-info-line>
        @if (edge.roleIsAtLeast('admin')) {
          <oe-modal-horizontal-line></oe-modal-horizontal-line>
          <oe-modal-info-line [info]="'EDGE.INDEX.WIDGETS.TIME_OF_USE_TARIFF.POWER_SOC_CHART_TITLE' | translate">
          </oe-modal-info-line>
          <powerSocChart class="ion-padding" [refresh]="refreshChart" [component]="component" [edge]="edge">
          </powerSocChart>
        }
      }
      <!-- OFF Mode -->
      @if (formGroup.value.mode === 'OFF') {
        <oe-modal-horizontal-line></oe-modal-horizontal-line>
        <ion-card-content>
          <!-- TODO - show Some information -->
        </ion-card-content>
      }
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      <!-- Control Mode -->
      <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.TIME_OF_USE_TARIFF.CHARGE_FROM_GRID_ACTIVATE'| translate"
        [formGroup]="formGroup" controlName="chargeConsumptionIsActive" [control]="{ type: 'TOGGLE' }"
        leftColumnWidth="100">
      </oe-modal-line>
      <!-- Control-Mode description -->
      <ng-container style="font-size: smaller">
        @if (formGroup.value.chargeConsumptionIsActive) {
          <span
          [innerHtml]="'EDGE.INDEX.WIDGETS.TIME_OF_USE_TARIFF.CONTROL_MODE_DESCRIPTION.CHARGE_CONSUMPTION' | translate"></span>
        }
      </ng-container>
    }
  </oe-modal>
}