<nz-row [nzGutter]="16">
  <nz-col [nzSpan]="8">
    <!-- show original items -->
    <nz-list
      nzHeader="Original {{ entityType }} List"
      nzBordered
      nzType="inner"
      nzSize="small">
      <nz-list-item
        *ngFor="let item of diffObject.currentObjects"
        ngClass="current">
        <ng-container *ngIf="!item.deleted; else deleted">
          <span nz-typography>
            <ng-container
              [ngTemplateOutlet]="itemTemplateRef || null"
              [ngTemplateOutletContext]="{ $implicit: item }">
            </ng-container>
          </span>
        </ng-container>
        <ng-template #deleted>
          <nz-tag nzColor="error"
            >Deleted {{ item.entityType | camelToWords }} {{ item.id }}</nz-tag
          >
        </ng-template>
      </nz-list-item>
      <nz-list-empty
        *ngIf="diffObject.currentObjects.length === 0"
        nzNoResult="No {{ entityType }}"></nz-list-empty>
    </nz-list>
  </nz-col>
  <nz-col [nzSpan]="8">
    <nz-space nzDirection="vertical">
      <!-- show removed items -->
      <ng-container *ngIf="diffObject.currentObjects.length > 0">
        <nz-list
          nzHeader="Removed {{ entityType }}"
          nzBordered
          nzType="inner"
          nzSize="small"
          *nzSpaceItem>
          <nz-list-item
            *ngFor="let item of diffObject.removedObjects"
            ngClass="removed">
            <ng-container *ngIf="!item.deleted; else deleted">
              <span nz-typography>
                <ng-container
                  [ngTemplateOutlet]="itemTemplateRef || null"
                  [ngTemplateOutletContext]="{ $implicit: item }">
                </ng-container>
              </span>
            </ng-container>
            <ng-template #deleted>
              <nz-tag nzColor="error"
                >Deleted {{ item.entityType | camelToWords }}
                {{ item.id }}</nz-tag
              >
            </ng-template>
          </nz-list-item>
          <nz-list-empty
            *ngIf="diffObject.removedObjects.length === 0"
            nzNoResult="No {{ entityType }} Removed"></nz-list-empty>
        </nz-list>
      </ng-container>
      <!-- show added items -->
      <nz-list
        nzHeader="Added {{ entityType }}"
        nzBordered
        nzType="inner"
        nzSize="small"
        *nzSpaceItem>
        <nz-list-item
          *ngFor="let item of diffObject.addedObjects"
          ngClass="added">
          <ng-container *ngIf="!item.deleted; else deleted">
            <span nz-typography>
              <ng-container
                [ngTemplateOutlet]="itemTemplateRef || null"
                [ngTemplateOutletContext]="{ $implicit: item }">
              </ng-container>
            </span>
          </ng-container>
          <ng-template #deleted>
            <nz-tag nzColor="error"
              >Deleted {{ item.entityType | camelToWords }}
              {{ item.id }}</nz-tag
            >
          </ng-template>
        </nz-list-item>
        <nz-list-empty
          *ngIf="diffObject.addedObjects.length === 0"
          nzNoResult="No {{ entityType }} Added"></nz-list-empty>
      </nz-list>
      <ng-container *ngIf="diffObject.currentObjects.length > 0">
        <nz-list
          nzHeader="Kept {{ entityType }}"
          nzBordered
          nzType="inner"
          nzSize="small"
          *nzSpaceItem>
          <nz-list-item
            *ngFor="let item of diffObject.keptObjects"
            ngClass="kept">
            <ng-container *ngIf="!item.deleted; else deleted">
              <span nz-typography>
                <ng-container
                  [ngTemplateOutlet]="itemTemplateRef || null"
                  [ngTemplateOutletContext]="{ $implicit: item }">
                </ng-container>
              </span>
            </ng-container>
            <ng-template #deleted>
              <nz-tag nzColor="error"
                >Deleted {{ item.entityType | camelToWords }}
                {{ item.id }}</nz-tag
              >
            </ng-template>
          </nz-list-item>
          <nz-list-empty
            *ngIf="diffObject.keptObjects.length === 0"
            nzNoResult="No {{ entityType }} Kept"></nz-list-empty>
        </nz-list>
      </ng-container>
    </nz-space>
  </nz-col>
  <nz-col [nzSpan]="8">
    <!-- show final list -->
    <nz-list
      nzHeader="Revised {{ entityType }} List"
      nzBordered
      nzType="inner"
      nzSize="small">
      <nz-list-item
        *ngFor="let item of diffObject.suggestedObjects"
        ngClass="suggested">
        <ng-container *ngIf="!item.deleted; else deleted">
          <span nz-typography>
            <ng-container
              [ngTemplateOutlet]="itemTemplateRef || null"
              [ngTemplateOutletContext]="{ $implicit: item }">
            </ng-container>
          </span>
        </ng-container>
        <ng-template #deleted>
          <nz-tag nzColor="error"
            >Deleted {{ item.entityType | camelToWords }} {{ item.id }}</nz-tag
          >
        </ng-template>
      </nz-list-item>
      <nz-list-empty
        *ngIf="diffObject.suggestedObjects.length === 0"
        nzNoResult="No {{ entityType }}"></nz-list-empty>
    </nz-list>
  </nz-col>
</nz-row>
