@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" [style]="lineStyle?.name ?? {}">
          @if (displayName) {
            {{ displayName }}
          }
        </td>
        <!-- Value of Parameter on the right side -->
        @if (displayValue && !hideValue) {
          <td [style.width]="(leftColumnWidth ?? 50) + '%'" class="align_right" [style]="lineStyle?.value ?? {}" [innerHTML]="displayValue">
            <!-- 'Normal' line, name and value  -->
          </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]="100 - (leftColumnWidth ?? 50) + '%'" class="align_right" [formGroup]="formGroup">
              <ion-item>
                <ion-input class="regularFont" type="control?.properties?.unit ?? number" style="text-align: right" tabindex="0" [formControlName]="controlName" label-placement="floating" [value]="formGroup.controls[controlName].value" label="&nbsp;{{ control?.properties?.unit ?? 'W' }}&nbsp;" labelPlacement="end"> </ion-input>
              </ion-item>
            </td>
          }
          <!-- 'TOGGLE' Line, provides toggle option -->
          @if (control.type === "TOGGLE") {
            <td [formGroup]="formGroup" [style]="this.service.getIsSmartphoneResolution() ? '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" class="align_right" [style.width]="100 - (leftColumnWidth ?? 50) + '%'">
              @if (control.options) {
                <ion-select interface="popover" [formControlName]="controlName" [okText]="'GENERAL.OK' | translate" [cancelText]="'GENERAL.CANCEL' | translate" style="text-align: end; float: right" slot="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>
                {{ control.valueConverter ? (formGroup.controls[controlName].value | converter: control.valueConverter) : formGroup.controls[controlName].value }}
              </ng-container>
            </td>
          }
          @if (control.type === "BUTTON") {
            <td [style.width]="100 - (leftColumnWidth ?? 50) + '%'" [formGroup]="formGroup" class="align_right">
              @if (control.button?.icon) {
                <ion-button slot="end" button (click)="control.button.callback()">
                  {{ control.button.name }}
                  <ion-icon slot="start" [name]="control.button.icon.name"></ion-icon>
                </ion-button>
              }
            </td>
          }
        } @else if (control) {
          @if (control.type === "BUTTON") {
            <td [style.width]="100 - (leftColumnWidth ?? 50) + '%'" class="align_right">
              @if (control.button?.icon) {
                <ion-button slot="end" button (click)="control.button.callback()">
                  {{ control.button.name }}
                  <ion-icon slot="start" [name]="control.button.icon.name"></ion-icon>
                </ion-button>
              }
            </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>
}