@if (isInitialized && formGroup) {
  <oe-modal [title]="this.component.alias" [component]="controller" [formGroup]="formGroup"
    helpKey="EVCS" [useDefaultPrefix]="useDefaultPrefix">
    @if (isReadWrite) {
      <ion-button button (click)="presentModal()" (keydown.enter)="presentModal()" tabindex="0">
        <ion-icon name="car"></ion-icon>
      </ion-button>
    }
    <ngx-spinner [name]="'spinner'"></ngx-spinner>
    @if (isConnectionSuccessful) {
      <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.STATUS' | translate" [value]="status">
      </oe-modal-line>
      @if (isReadWrite) {
        @if (chargePowerLimit >= maxChargePower) {
          <oe-modal-line
            [name]="'EDGE.INDEX.WIDGETS.EVCS.CHARGE_TARGET' | translate" [value]="maxChargePower">
          </oe-modal-line>
        } @else {
          <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.CHARGE_TARGET' | translate" [value]="chargePowerLimit">
          </oe-modal-line>
        }
      }
      @if (chargePower?.value > 0) {
        <oe-modal-line
          [name]="'EDGE.INDEX.WIDGETS.EVCS.CHARGING_POWER' | translate" [value]="chargePower.value"
          [converter]="Utils.CONVERT_TO_WATT">
        </oe-modal-line>
      } @else {
        <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.CHARGING_POWER' | translate" [value]="emptyValue">
        </oe-modal-line>
      }
      @if (chargePower?.value > 0 || state === 2 || state === 7) {
        <oe-modal-line
          [name]="'EDGE.INDEX.WIDGETS.EVCS.ENERGY_SINCE_BEGINNING' | translate" [value]="energySession">
        </oe-modal-line>
      }
      @if (isReadWrite) {
        @if (awaitingHysteresis) {
          <ion-row>
            <ion-col size="1" style="display: flex; align-items: center; justify-content: center;">
              <ion-icon name="information-outline" size="large"></ion-icon>
            </ion-col>
            <ion-col size="11">
              <oe-modal-info-line
                [info]="[{text:'EDGE.INDEX.WIDGETS.EVCS.HYSTERESIS' | translate, lineStyle:'color: #FFA500'},{text:'EDGE.INDEX.WIDGETS.EVCS.HYSTERESIS_INFO' | translate}]">
              </oe-modal-info-line>
            </ion-col>
          </ion-row>
        }
        <oe-modal-horizontal-line></oe-modal-horizontal-line>
        <table class="full_width">
          <tr>
            <td translate>
              GENERAL.MODE
            </td>
            @if (formGroup.value.chargeMode !== 'OFF') {
              <td class="align_right">
                <ion-icon (click)="isPrioritization = false; presentPopover()" class="ion-no-padding"
                  style="text-align: right; font-size: 20px" style="cursor: pointer" name="information-circle-outline">
                </ion-icon>
              </td>
            }
          </tr>
        </table>
        @if (formGroup.controls['chargeMode'].value) {
          <oe-modal-buttons [formGroup]="formGroup" controlName="chargeMode"
        [component]="component" [buttons]="[
    { name: ('GENERAL.MANUALLY' | translate), value: 'FORCE_CHARGE', icon: {color:'success', name: 'options-outline'}},
    { name: ('GENERAL.AUTOMATIC' | translate), value: 'EXCESS_POWER', icon: {color:'primary', name: 'sunny-outline'}},
    { name: ('GENERAL.OFF' | translate), value: 'OFF', icon: {color:'danger', name: 'power-outline'}}]">
          </oe-modal-buttons>
        }
      }
      <oe-modal-horizontal-line></oe-modal-horizontal-line>
      @if (controller) {
        <!--Force Charge settings-->
        @if (formGroup.value.chargeMode === 'FORCE_CHARGE') {
          <ng-container>
            <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.FORCE_CHARGE_MODE.MAX_CHARGING'| translate"
              [value]="formatNumber(formGroup.value['forceChargeMinPower'] * numberOfPhases)" [component]="component"
              [converter]="Utils.CONVERT_TO_WATT">
            </oe-modal-line>
            <!-- this section has to be change later -->
            @if (minChargePower && maxChargePower && numberOfPhases && formGroup.value.forceChargeMinPower) {
              <table class="full_width"
                >
                <tr>
                  <ion-range style="width: 100%" (ionChange)="updateForceMinPower($event, controller, numberOfPhases)"
                    min="{{ formatNumber(minChargePower) }}" max="{{ formatNumber(maxChargePower) }}" color="dark"
                    pin="true" style="padding-top: 8px;" step="100" debounce="500" [pinFormatter]="WATT_PIN_FORMATTER"
                    value="{{controller.properties['forceChargeMinPower'] * numberOfPhases}}">
                    <ion-label slot="start">
                      {{ formatNumber(minChargePower) |
                      unitvalue:'W'}}
                    </ion-label>
                    <ion-label slot="end">
                      {{ formatNumber(maxChargePower) |
                      unitvalue:'W'}}
                    </ion-label>
                  </ion-range>
                </tr>
              </table>
            }
          </ng-container>
          <oe-modal-horizontal-line></oe-modal-horizontal-line>
        }
        <!--Excess Power settings-->
        @if (formGroup.value.chargeMode === 'EXCESS_POWER') {
          <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.OPTIMIZED_CHARGE_MODE.MIN_CHARGING'| translate"
            [formGroup]="formGroup" controlName="minGuarantee" [control]="{ type: 'TOGGLE' }" leftColumnWidth="100">
          </oe-modal-line>
          @if (formGroup.controls['minGuarantee'].value === true) {
            <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.OPTIMIZED_CHARGE_MODE.MIN_CHARGE_POWER'| translate"
              [formGroup]="formGroup" [component]="controller" [value]="formGroup.value['defaultChargeMinPower']"
              [converter]="Utils.CONVERT_TO_WATT">
            </oe-modal-line>
            <oe-modal-line [formGroup]="formGroup" controlName="defaultChargeMinPower"
              [control]="{type: 'RANGE', properties: {tickMin: minChargePower, tickMax: maxChargePower, unit: 'W', step: 100, pinFormatter: WATT_PIN_FORMATTER }}">
            </oe-modal-line>
          }
          <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.PRIORITIZATION'| translate">
          </oe-modal-line>
          @if (formGroup.controls['priority'].value) {
            <oe-modal-buttons [formGroup]="formGroup" controlName="priority"
              [component]="component"
          [buttons]="[
    { name: ('EDGE.INDEX.WIDGETS.EVCS.OPTIMIZED_CHARGE_MODE.CHARGING_PRIORITY.CAR' | translate), value: 'CAR', icon: {color:'success', name: 'oe-evcs'}},
    { name: ('EDGE.INDEX.WIDGETS.EVCS.OPTIMIZED_CHARGE_MODE.CHARGING_PRIORITY.STORAGE' | translate), value: 'STORAGE', icon: {color:'success', name: 'oe-storage'}}]">
            </oe-modal-buttons>
          }
          <oe-modal-horizontal-line></oe-modal-horizontal-line>
        }
        @if (controller && formGroup.value.chargeMode !== 'OFF') {
          <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.MAX_ENERGY_RESTRICTION'| translate" [formGroup]="formGroup"
            [component]="controller" controlName="energyLimit" [control]="{ type: 'TOGGLE' }" class="align_right"
            leftColumnWidth="100">
          </oe-modal-line>
          @if (formGroup.controls['energyLimit'].value === true) {
            <oe-modal-line [name]="'EDGE.INDEX.WIDGETS.EVCS.ENERGY_LIMIT'| translate" [formGroup]="formGroup"
              [component]="controller" [value]="formGroup.value['energySessionLimit']"
              [converter]="Utils.CONVERT_TO_KILO_WATTHOURS">
            </oe-modal-line>
            <!-- Using "kWh " (with space) to not use the default unitvalue pipe conversion -->
            <oe-modal-line [formGroup]="formGroup" controlName="energySessionLimitKwh"
              [control]="{type: 'RANGE', properties: {tickMin: 1, tickMax: 100, unit: 'kWh ', step:1, pinFormatter: KILO_WATT_HOURS_PIN_FORMATTER}}">
            </oe-modal-line>
          }
        }
      }
      <!--Uncontrollable Evcs-->
      @if (!controller && isReadWrite) {
        <oe-modal-info-line [info]="('EDGE.INDEX.WIDGETS.EVCS.UNCONTROLLABLE' | translate)">
        </oe-modal-info-line>
      }
    }
    @if (!isConnectionSuccessful) {
      <oe-modal-info-line [info]="('EDGE.INDEX.WIDGETS.EVCS.NO_CONNECTION.DESCRIPTION' | translate)">
      </oe-modal-info-line>
    }
  </oe-modal>
}