<div class="details">
    <redaction-annotation-icon
        [color]="annotation.color"
        [label]="annotation.isEarmark ? '' : ((annotationTypesTranslations[annotation.superType] | translate)[0] | uppercase)"
        [type]="annotation.iconShape"
        class="mt-6 mr-10"
    ></redaction-annotation-icon>

    <div class="flex-1">
        <div>
            <strong>{{ annotation.typeLabel | translate }}</strong>
            &nbsp;
            <strong *ngIf="annotation.pending && !annotation.isSuggestion" class="pending-analysis">
                {{ 'annotation.pending' | translate }}
            </strong>
        </div>

        <div *ngIf="annotation.entity">
            <strong>
                <span>{{ annotation.descriptor | translate }}</span
                >:
            </strong>
            {{ annotation.recategorizationType ?? annotation.entity.label }}
        </div>

        <div
            *deny="roles.getRss; if: !!annotation.shortContent && !annotation.isHint && !annotation.isSkipped && !annotation.isIgnoredHint"
        >
            <strong><span translate="content"></span>: </strong>{{ annotation.shortContent }}
        </div>

        <div *ngIf="annotation.isEarmark">
            <strong><span translate="color"></span>: </strong>{{ annotation.color }}
        </div>

        <div *ngIf="annotation.isEarmark">
            <strong><span translate="size"></span>: </strong>{{ annotation.width }}x{{ annotation.height }} px
        </div>
    </div>

    <div class="active-icon-marker-container">
        <iqser-round-checkbox *ngIf="multiSelectService.active() && isSelected" [active]="true"></iqser-round-checkbox>
    </div>
</div>
