@if (!isStagger) {
  <div class="circles">
    @for (circle of data | slice : 0 : (limit || data?.length); track $index; ) {
      <div
        class="circle"
        [class.empty]="!circle.name"
        [class]="circle.class"
        [class.long]="circle.initials?.length > 4"
        [class.me-2]="$index === 0 && data.length === 1"
        [style.left.px]="-6 * $index"
        [smTooltip]="circle.name"
      >
        <div class="inner-circle">
          @if (circle.iconClass) {
            <i class="al-icon sm-md" [class]="circle.iconClass"></i>
          } @else {
            {{ circle.name ? circle.initials || (circle.name | initials) : '' }}
          }
        </div>
      </div>
    }
    @if (limit && data.length > limit) {
      <div class="circle rest"
           [style.left.px]="-6 * (limit)">
        <div>+{{ data.length - limit }}</div>
      </div>
    }
  </div>
} @else {
  <div class="circles">
    @for (circle of staggerArray; track $index; ) {
      <div
        class="circle stagger"
        [style.left.px]="-27 * $index"
        [style.zIndex]="staggerArray.length - $index"
      >{{ $index === 0 ? stagger : '' }}
      </div>
    }
  </div>
}
