<div class="tip-wrapper tip-position" [style.width]='maxWidth'>
    <clr-tooltip>
        <div clrTooltipTrigger class="tip-block">
        <div class="tip-wrapper bar-block-high" [style.width]='tipWidth(5)'></div>
        <div class="tip-wrapper bar-block-medium" [style.width]='tipWidth(4)'></div>
        <div class="tip-wrapper bar-block-low" [style.width]='tipWidth(3)'></div>
        <div class="tip-wrapper bar-block-unknown" [style.width]='tipWidth(2)'></div>
        <div class="tip-wrapper bar-block-none" [style.width]='tipWidth(1)'></div>
        </div>
        <clr-tooltip-content [clrPosition]="'right'" [clrSize]="'lg'" *clrIfOpen>
            <div [ngSwitch]="scanLevel" class="bar-tooltip-font-larger">
                <ng-template [ngSwitchCase]="5">
                    <clr-icon shape="exclamation-circle" 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-template>
                <ng-template [ngSwitchCase]="4">
                    <clr-icon *ngIf="hasMedium" shape="exclamation-triangle" 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-template>
                <ng-template [ngSwitchCase]="3">
                    <clr-icon shape="play" class="tip-icon-low rotate-90" size="28"></clr-icon>
                    <span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.LOW' | translate | titlecase }}</span></span>
                </ng-template>
                <ng-template [ngSwitchCase]="2">
                    <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-template>
                <ng-template [ngSwitchCase]="1">
                    <clr-icon shape="check-circle"  class="is-success" size="32"></clr-icon>
                    <span>{{'VULNERABILITY.NO_VULNERABILITY' | translate }}</span>
                </ng-template>
            </div>
            <hr>
            <div>
                <span class="bar-tooltip-font bar-tooltip-font-title">{{tipTitle}}</span>
            </div>
            <div class="bar-summary bar-tooltip-fon">
                <div *ngIf="hasHigh" class="bar-summary-item">
                    <span><clr-icon shape="exclamation-circle" class="is-error" size="24"></clr-icon></span>
                    <span>{{highCount}}</span><span>{{getPackageText(highCount) | translate}} {{haveText(highCount) | translate}} {{'VULNERABILITY.SEVERITY.HIGH' | translate }} {{unitText(highCount) | translate }}</span>
                </div>
                <div *ngIf="hasMedium" class="bar-summary-item">
                    <span><clr-icon *ngIf="hasMedium" shape="exclamation-triangle" class="tip-icon-medium" size="22"></clr-icon></span>
                    <span>{{mediumCount}}</span><span>{{getPackageText(mediumCount) | translate}} {{haveText(mediumCount) | translate}} {{'VULNERABILITY.SEVERITY.MEDIUM' | translate }} {{unitText(mediumCount) | translate }}</span>
                </div>
                <div *ngIf="hasLow" class="bar-summary-item">
                    <span><clr-icon shape="play" class="tip-icon-low rotate-90" size="20"></clr-icon></span>
                    <span>{{lowCount}}</span><span>{{getPackageText(lowCount) | translate}} {{haveText(lowCount) | translate}} {{'VULNERABILITY.SEVERITY.LOW' | translate }} {{unitText(lowCount) | translate }}</span>
                </div>
                <div *ngIf="hasUnknown" class="bar-summary-item">
                    <span><clr-icon shape="help" size="18"></clr-icon></span>
                    <span>{{unknownCount}}</span><span>{{getPackageText(unknownCount) | translate}} {{haveText(unknownCount) | translate}} {{'VULNERABILITY.SEVERITY.UNKNOWN' | translate }} {{unitText(unknownCount) | translate }}</span>
                </div>
                <div *ngIf="hasNone" class="bar-summary-item">
                    <span><clr-icon shape="check-circle" class="is-success" size="24"></clr-icon></span>
                    <span>{{noneCount}}</span><span>{{'VULNERABILITY.SEVERITY.NONE' | translate }}</span>
                </div>
            </div>
            <div>
                <span class="bar-scanning-time">{{'VULNERABILITY.CHART.SCANNING_TIME' | translate}} </span>
                <span>{{completeTimestamp | harborDatetime:'MM/dd/y HH:mm:ss'}}</span>
            </div>
        </clr-tooltip-content>
    </clr-tooltip>
</div>