<span class="namedEntityRef {{ data.entityType }}" (click)="toggleEntityData($event)" [ngClass]="{
        opened: opened,
        entityHighlight: (evtStatusService.currentNamedEntityId$ | async) === data.entityId && !opened,
        noDetails: (availableEntities$ | async) === false
    }" [evtHighlight]="highlightData" [evtHtmlAttributes]="data?.attributes">
    <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
</span>
<ng-container *ngIf="availableEntities$ | async">
    <div *ngIf="opened" class="namedEntityRefDetail {{ data.entityType }}">
        <ng-container *ngIf="entity$ | async as entity; else loading">
            <span *ngIf="entity === 'notFound'" class="d-block p-2 pl-3 font-italic font-weight-light not-found-msg">{{ 'entityNotFound' | translate }}</span>
            <evt-named-entity *ngIf="entity !== 'notFound'" [inList]="true" [data]="entity"> </evt-named-entity>
        </ng-container>
        <ng-template #loading>Loading...</ng-template>
    </div>
</ng-container>