@if (layout == 'horizontal') {
  <div class="w-view-text-content grid flex align-content-center">
    <div class="col-4 w-view-text-label">
      <w-input-label class="flex" [label]="label" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition"></w-input-label>
    </div>
    <div class="col-8 w-view-text-value">
      <ng-container *ngTemplateOutlet="icons"></ng-container>
    </div>
  </div>
} @else {
  <div class="flex flex-column">
    <w-input-label class="flex" [label]="label" [tooltip]="tooltip" [tooltipPosition]="tooltipPosition"></w-input-label>
    <div class="flex input-label-gap-divider"></div>
    <div class="flex w-view-text-value-vertical">
      <ng-container *ngTemplateOutlet="icons"></ng-container>
    </div>
    <div class="flex spacingXSMDivider"></div>
  </div>
}

<ng-template #icons>
  @if (value == true && getIconType(trueIcon) == iconType.pIcon) {
    <span [class]="trueIcon" [style.color]="trueIconColor"></span>
  }
  @if (value == false && getIconType(falseIcon) == iconType.pIcon) {
    <span [class]="falseIcon" [style.color]="falseIconColor"></span>
  }
  @if (value == null && getIconType(nullIcon) == iconType.pIcon) {
    <span [class]="nullIcon" [style.color]="nullIconColor"></span>
  }
  @if (value == true && getIconType(trueIcon) == iconType.wIcon) {
    <w-icons class="w-sidebar-icon" [name]="trueIcon" [color]="trueIconColor" [width]="12" [height]="12"></w-icons>
  }
  @if (value == false && getIconType(falseIcon) == iconType.wIcon) {
    <w-icons class="w-sidebar-icon" [name]="falseIcon" [color]="falseIconColor" [width]="12" [height]="12"></w-icons>
  }
  @if (value == null && getIconType(nullIcon) == iconType.wIcon) {
    <w-icons class="w-sidebar-icon" [name]="nullIcon" [color]="nullIconColor" [width]="12" [height]="12"></w-icons>
  }
</ng-template>