@if (_noSelection() && _changesTooltip()) {
    <div [matTooltip]="_changesTooltip()" class="chip" matTooltipClass="multiline" matTooltipPosition="above">
        <mat-icon [svgIcon]="'red:redaction-changes'"></mat-icon>
    </div>
}

@if (_noSelection() && _engines()) {
    <div
        #trigger="cdkOverlayOrigin"
        (mouseout)="_isPopoverOpen.set(false)"
        (mouseover)="_isPopoverOpen.set(true)"
        cdkOverlayOrigin
        class="chip"
    >
        <mat-icon *ngFor="let engine of _engines()" [svgIcon]="engine.icon"></mat-icon>
    </div>

    <ng-template
        [cdkConnectedOverlayOffsetY]="-8"
        [cdkConnectedOverlayOpen]="_isPopoverOpen()"
        [cdkConnectedOverlayOrigin]="trigger"
        cdkConnectedOverlay
    >
        <div class="popover">
            <div *ngFor="let engine of _engines()" class="flex-align-items-center">
                <mat-icon [svgIcon]="engine.icon"></mat-icon>
                <span [innerHTML]="engine.description | translate: engine.translateParams"></span>
            </div>
        </div>
    </ng-template>
}