<ng-container *ngIf="item">
    <ng-container  [ngSwitch]="item.dataType">
      <!-- 'group' -->
      <ng-container *ngSwitchCase="'SECTION'">
        <lhc-item-group [item]="item" ></lhc-item-group>
      </ng-container>
      <!-- 'display' -->
      <ng-container *ngSwitchCase="'TITLE'">
        <lhc-item-display [item]="item"></lhc-item-display>
      </ng-container>
      <!-- 'question' -->
      <ng-container *ngSwitchDefault>
        <lhc-item-question [item]="item" class="lhc-de {{lhcDataService.getActiveRowClass(item)}}" [ngStyle]="lhcDataService.getItemStyle(item)"></lhc-item-question>
        <!-- question item could have sub items -->
        <div *ngIf="item.items" class="lhc-item-group-body">
          <ng-container *ngFor="let item of item.items; trackBy: lhcDataService.trackByElementId">
            <lhc-item *ngIf="item && !item._isHiddenFromView && lhcDataService.targetShown(item)"
              [item]="item" class="{{lhcDataService.getItemClassList(item, viewMode)}}"
              id="item-{{ item._elementId }}">
            </lhc-item>
          </ng-container>
        </div>
        <!-- a button at the end of each repeating section -->
        <div class="lhc-button-padding {{lhcDataService.getSiblingStatus(item)}}" *ngIf="item._lastRepeatingItem && !item._isHiddenFromView && lhcDataService.targetEnabled(item)">
          <div class="{{lhcDataService.getSkipLogicClass(item)}}">
            <lhc-button-popover [item]="item" [popoverType]="'repeating-item'" buttonLabel= '+ {{item._text}}'></lhc-button-popover>
            <span *ngIf="item._minOccursNotMet" style="color: red;"> This repeatable item should have at least {{item.questionCardinality.min}} occurrences.</span>
          </div>
        </div>
        <span *ngIf="item._maxOccursExcceeded" style="color: red;"> This repeatable item should have at most {{item.questionCardinality.max}} occurrences.</span>
      </ng-container>
    </ng-container>
  </ng-container>
