<div *ngIf="annotationReferencesService.references() as references" class="content-container">
    <div class="dialog references-dialog">
        <div class="references-header flex">
            <div class="small-label uppercase">
                {{ 'references' | translate : { count: references.length } }}
            </div>
            <iqser-circle-button (action)="annotationReferencesService.hide()" icon="iqser:close"></iqser-circle-button>
        </div>

        <div *ngIf="annotationReferencesService.annotation() as annotation" class="annotations-container flex">
            <div [class.active]="isSelected$ | async" class="annotation-container">
                <div class="annotation-card-container flex">
                    <redaction-annotation-card [annotation]="annotation"></redaction-annotation-card>
                    <redaction-annotation-references-page-indicator
                        [number]="annotation.pageNumber"
                    ></redaction-annotation-references-page-indicator>
                </div>
            </div>

            <redaction-annotation-reference
                (click)="referenceClicked.emit(reference)"
                *ngFor="let reference of references"
                [annotation]="reference"
                class="annotation-container"
            ></redaction-annotation-reference>
        </div>
    </div>
</div>
