@if (isInitialized) {
  <oe-flat-widget tabindex="0" button [modalComponent]="modalComponent" [title]="component.alias"
    [icon]="{name:
    'flame-outline', color: 'normal'}">
    <oe-flat-widget-line [name]="'GENERAL.MODE'| translate" [value]="mode"></oe-flat-widget-line>
    @if (icon.name === '') {
      <oe-flat-widget-line [name]="'GENERAL.STATE' | translate" [value]="state">
      </oe-flat-widget-line>
    } @else {
      <oe-flat-widget-line [icon]="icon" [name]="'GENERAL.STATE' | translate"></oe-flat-widget-line>
    }
    @if (this.modeChannelValue === 'AUTOMATIC') {
      <oe-flat-widget-percentagebar>
        <svg>
          <use href="#container"></use>
          <rect y="2" rx="6" ry="6" height="18" ngClass="primary-color"
            [style]="'x: calc(' + lowThresholdValue + '% + 2px); width: calc(' + thresholdDelta + '% - 4px);'" />
          @if ((thresholdDelta) > 15) {
            <text id="first" attr.x="{{ lowThresholdValue }}%" dx="3px" y="50%"
              dominant-baseline="middle" text-anchor="start" style="font-weight: 500" ngClass="secondary-color">
              {{lowThresholdValue + " %" }}
            </text>
          }
          @if ((thresholdDelta) > 15) {
            <text id="second" attr.x="{{ highThresholdValue }}%" dx="-3px" y="50%"
              dominant-baseline="middle" text-anchor="end" style="font-weight: 500;" ngClass="secondary-color">
              {{highThresholdValue + " %" }}
            </text>
          }
          @if (inputChannelValue; as value) {
            <rect y="2" rx="0" ry="0" width="1%" height="18"
              [style]="'x: calc(' + value + '% + 2px); fill: #0000ff80;'" />
          }
        </svg>
      </oe-flat-widget-percentagebar>
    }
  </oe-flat-widget>
}