<ng-container *ngIf="item">
  <div *ngIf="!hideGrouptTitle" class="lhc-item-group-title lhc-de-label-button">
    <div class="lhc-de-label">
      <lhc-item-question-text [item]="item"></lhc-item-question-text>
    </div>
    <div class="lhc-de-button">
      <button *ngIf="!lhcDataService.hasOneRepeatingItem(item)" class="lhc-float-button lhc-button" type="button"
                (click)="lhcDataService.removeOneRepeatingItem(item)" id="del-{{item._elementId}}"
                title='Remove this "{{ item._text }}"' [disabled]="item._readOnly">-</button>
    </div>
  </div>

  <!-- 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 && lhcDataService.targetShown(item) && !item._isHiddenFromView"
        [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 *ngIf="item._lastRepeatingItem" class="lhc-button-padding {{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>
  <span *ngIf="item._maxOccursExcceeded" style="color: red;"> This repeatable item should have at most {{item.questionCardinality.max}} occurrences.</span>

</ng-container>

