
<ng-container *ngIf="isFormArray(control)">
  <div fxLayout="column" fxFlex="1 1 100" fxLayoutAlign="start start" fxLayoutGap="15px" fxFlexFill>
    <ng-container *ngFor="let group of control.controls; index as i">
      <div fxLayout="column" fxFlex="1 1 auto" fxLayoutAlign="start start" fxLayoutGap="5px" fxFlexFill [formGroup]="group">
        <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="start center" fxFlexFill>
          <input class="knk-input knk-input--wide" formControlName="reference" inputCleanWhitespaces placeholder="http://">
        </div>
        <ng-container *ngIf="control.length &gt; 1">
          <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="end center" fxFlexFill><i class="material-icons" (click)="removeReference(i)" [style.cursor]="'pointer'">delete</i></div>
        </ng-container>
        <ng-container *ngIf="isControlDirtyOrTouched(group?.controls?.reference) &amp;&amp; group?.controls?.reference?.errors?.required">
          <div class="knk-error">The field is required</div>
        </ng-container>
        <ng-container *ngIf="group?.controls?.reference?.errors?.pattern">
          <div class="knk-error">The field must be URL</div>
        </ng-container>
        <ng-container *ngIf="!group?.controls?.reference?.errors &amp;&amp; availableReferences?.length">
          <ng-container *ngIf="availableReferences[i] as reference">
            <div [style.paddingTop.px]="5">
              <div class="knk-track-knok-article" fxLayout="row" fxLayoutGap="30px" fxFlexFill (click)="openUrlInNewTab(reference.url)" [style.cursor]="'pointer'">
                <div class="knk-track-knok-article__thumbnail"><img class="knk-track-knok-article__thumbnail-image" *ngIf="reference?.image" [src]="reference?.image"><i class="material-icons knk-track-knok-article__thumbnail-icon" *ngIf="!reference?.image" aria-hidden="true">image</i></div>
                <div fxLayout="column">
                  <div class="knk-track-knok-article__title">{{reference?.header}}</div>
                  <div class="knk-track-knok-article__subtitle">
                    <ng-container *ngIf="reference?.publishedBy"><strong>{{reference?.publishedBy}}&#160;&#160;|&#160;</strong></ng-container>{{reference?.published | date:'dd/MM/yyyy'}}
                  </div>
                  <div class="knk-track-knok-article__description">{{reference?.description}}</div>
                </div>
              </div>
            </div>
          </ng-container>
        </ng-container>
      </div>
    </ng-container>
    <ng-container *ngIf="!externalControl">
      <ng-container *ngIf="control.length &lt; 10">
        <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="start center">
          <button class="knk-button knk-button--filled" (click)="addReference()" role="button" tabindex="-1" aria-pressed="false" type="button"><i class="material-icons knk-button__icon">add_circle_outline</i>&#160;Add Reference</button>
        </div>
      </ng-container>
    </ng-container>
  </div>
</ng-container>