@if (isAllowedToBeSeen && show) {
  <table class="full_width" style="line-height: 1.4; margin-top: 0.5%">
    @if (textIndent) {
      <tr [style.text-indent]="textIndent">
        <!-- Name of Parameter on the left side -->
        <td [style.width]="(leftColumnWidth ?? 50)  + '%'" class="align_left">
          @if (displayName) {
            {{ displayName }}
          }
        </td>
        <!-- Value of Parameter on the right side -->
        @if (displayValue) {
          <td [style.width]="(leftColumnWidth ?? 50)  + '%'" class="align_right">
            <!-- 'Normal' line, name and value  -->
            <ng-container>{{ displayValue }}</ng-container>
          </td>
        }
        @if (button) {
          <td [style.width]="(leftColumnWidth ?? 50)  + '%'" class="align_right">
            <!-- 'Normal' line, name and value  -->
            <ion-icon [name]="button.icon?.name ??'help-circle-outline'" [color]="button.icon?.color ??'light'"
              [size]="button.icon?.size ??'medium'">
            </ion-icon>
          </td>
        }
        @if (formGroup && control) {
          <!-- 'Input' Line, name and changeable value -->
          @if (control.type === 'INPUT') {
            <td style="width: 30%" class="align_right" [formGroup]="formGroup">
              <ion-item>
                <ion-input class="regularFont" type="number" style="text-align: right;" tabindex="0"
                  [formControlName]="controlName" label-placement="floating"
                  label="&nbsp;{{control?.properties?.unit ?? 'W' }}&nbsp;">
                </ion-input>
              </ion-item>
            </td>
          }
          <!-- 'TOGGLE' Line, provides toggle option -->
          @if (control.type === 'TOGGLE') {
            <td [formGroup]="formGroup"
              [style]="this.service.isSmartphoneResolution ? 'transform: scale(0.7)': ''" class="align_right">
              <ion-toggle (keydown.enter)="toggleOnEnter($event, controlName)" button tabindex="0" mode="md"
                [formControlName]="controlName">
              </ion-toggle>
            </td>
          }
          <!-- 'SELECT' Line, provides select dropdown -->
          @if (control.type === 'SELECT') {
            <td [formGroup]="formGroup">
              @if (control.options) {
                <ion-select interface="popover" [formControlName]="controlName" [okText]="'GENERAL.OK'| translate"
                  [cancelText]="'GENERAL.CANCEL'| translate" style="text-align:end">
                  @for (option of control.options; track option) {
                    <ion-select-option [value]="option.value">
                      {{option.name}}
                    </ion-select-option>
                  }
                </ion-select>
              }
            </td>
          }
          @if (control.type === 'TEXT') {
            <td [style.width]="(100 - (leftColumnWidth ?? 50))  + '%'"
              [formGroup]="formGroup" class="align_right">
              <ng-container>{{formGroup.controls[controlName].value | converter:control.valueConverter }}
              </ng-container>
            </td>
          }
        }
        <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
        <ng-template #contentTpl>
          <td [style.width]="(leftColumnWidth ?? 50)  + '%'" class="align_right">
            <!-- 'Normal' line, name and value  -->
            <ng-content></ng-content>
          </td>
        </ng-template>
      </tr>
    }
    @if (formGroup) {
      <tr>
        <!-- 'RANGE' Line, provides a range button from min to max -->
        @if (control?.type === 'RANGE') {
          <td style="width: 100%">
            <ng-container [formGroup]="formGroup">
              <ion-range style="width: 100%" color="dark" pin="true" [min]="control.properties.tickMin ?? 1"
                [max]="control.properties.tickMax ?? 100" [step]="control.properties.step ?? 1"
                style="padding-top: 8px;" [formControlName]="controlName" debounce="500"
                [pinFormatter]="control.properties.pinFormatter ?? DEFAULT_PIN_FORMATTER" [pin]="true"
                [snaps]="control.properties?.snaps ?? false">
                <ion-label slot="start">
                  @if(control.properties.unit){
                    {{ control.properties.tickMin| unitvalue:control.properties.unit}}
                    }@else{
                    {{ control.properties.tickMin
                    | converter:control.properties.tickFormatter ? control.properties.tickFormatter : null}}
                  }
                </ion-label>
                <ion-label slot="end">
                  @if(control.properties.unit){
                    {{ control.properties.tickMax| unitvalue:control.properties.unit}}
                    }@else{
                    {{ control.properties.tickMax
                    | converter:control.properties.tickFormatter ? control.properties.tickFormatter : null}}
                  }
                </ion-label>
              </ion-range>
            </ng-container>
          </td>
        }
      </tr>
    }
  </table>
}