<div class="tip-wrapper tip-position width-210">
    <clr-tooltip>
        <div clrTooltipTrigger class="tip-block">
            <ng-container *ngIf="!isNone">
                <div *ngIf="criticalCount > 0" class="tip-wrapper bar-block-critical shadow-critical width-30">{{criticalCount}}</div>
                <div *ngIf="highCount > 0" class="margin-left-5 tip-wrapper bar-block-high shadow-high width-30">{{highCount}}</div>
                <div *ngIf="mediumCount > 0" class="margin-left-5 tip-wrapper bar-block-medium shadow-medium width-30">{{mediumCount}}</div>
                <div *ngIf="lowCount > 0" class="margin-left-5 tip-wrapper bar-block-low shadow-low width-30">{{lowCount}}</div>
                <div *ngIf="negligibleCount > 0" class="margin-left-5 tip-wrapper bar-block-none shadow-none width-30">{{negligibleCount}}</div>
                <div *ngIf="unknownCount > 0" class="margin-left-5 tip-wrapper bar-block-unknown shadow-unknown width-30">{{unknownCount}}</div>
            </ng-container>
            <div *ngIf="isNone" class="margin-left-5 tip-wrapper bar-block-none shadow-none width-150">{{'VULNERABILITY.NO_VULNERABILITY' | translate }}</div>
        </div>
        <clr-tooltip-content class="w-800" [clrPosition]="'right'" [clrSize]="'lg'" *clrIfOpen>
            <div class="bar-tooltip-font-larger">
                <ng-container *ngIf="isCritical">
                    <clr-icon shape="exclamation-circle" class="is-error" size="32"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.CRITICAL' | translate | titlecase }}</span></span>
                </ng-container>
                <ng-container *ngIf="isHigh">
                    <clr-icon shape="exclamation-triangle" class="is-error" size="32"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.HIGH' | translate | titlecase }}</span></span>
                </ng-container>
                <ng-container *ngIf="isMedium">
                    <clr-icon shape="minus-circle" class="tip-icon-medium" size="30"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.MEDIUM' | translate | titlecase}}</span></span>
                </ng-container>
                <ng-container *ngIf="isLow">
                    <clr-icon shape="info-circle" class="tip-icon-low" size="32"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.LOW' | translate | titlecase }}</span></span>
                </ng-container>
                <ng-container *ngIf="isUnknown">
                    <clr-icon shape="help" size="24" class="help-icon"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate | titlecase }}</span></span>
                </ng-container>
                <ng-container *ngIf="isNegligible">
                    <clr-icon shape="circle" class="is-success" size="32"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.NEGLIGIBLE' | translate | titlecase }}</span></span>
                </ng-container>
                <ng-container *ngIf="isNone">
                    <clr-icon shape="check-circle" class="is-success" size="32"></clr-icon>
                    <span>{{'VULNERABILITY.NO_VULNERABILITY' | translate }}</span>
                </ng-container>
            </div>
            <hr>
            <div class="bar-summary bar-tooltip-fon" *ngIf="!isNone">
                <histogram-chart [isWhiteBackground]="false" [metadata]="passMetadataToChart()"></histogram-chart>
            </div>
            <div>
                <span class="bar-scanning-time">{{'VULNERABILITY.CHART.SCANNING_TIME' | translate}} </span>
                <span>{{completeTimestamp | date:'short'}}</span>
            </div>
        </clr-tooltip-content>
    </clr-tooltip>
</div>
