export const TIP_COMPONENT_HTML: string = `
<div class="tip-wrapper tip-position" [style.width]='tipWidth'>
    <clr-tooltip [clrTooltipDirection]="'top-right'" [clrTooltipSize]="'lg'">
        <div class="{{tipClass}}" [style.width]='tipWidth'></div>
        <clr-tooltip-content>
            <div>
                <clr-icon *ngIf="isHigh" shape="exclamation-circle" class="{{tipIconClass}}" size="24"></clr-icon>
                <clr-icon *ngIf="isMedium" shape="exclamation-triangle" class="{{tipIconClass}}" size="24"></clr-icon>
                <clr-icon *ngIf="isLow" shape="info-circle" class="{{tipIconClass}}" size="24"></clr-icon>
                <clr-icon *ngIf="isNone" shape="check-circle" class="{{tipIconClass}}" size="24"></clr-icon>
                <clr-icon *ngIf="isUnknown" shape="help" class="{{tipIconClass}}" size="16"></clr-icon>
                <span class="bar-tooltip-font bar-tooltip-font-title">{{tipTitle}}</span>
            </div>
            <div class="bar-summary bar-tooltip-font">
                <span class="bar-scanning-time">{{'VULNERABILITY.CHART.SCANNING_TIME' | translate}} </span>
                <span>{{completeDateTime | date}}</span>
                <div *ngIf="hasResultsToList">
                    <ul *ngFor="let item of data">
                        <li>{{item.id}} {{item.version}} {{item.package}}</li>
                    </ul>
                </div>
            </div>
        </clr-tooltip-content>
    </clr-tooltip>
</div>
`;

export const GRID_COMPONENT_HTML: string = `
<div>
    <clr-datagrid>
        <clr-dg-column [clrDgField]="'id'">{{'VULNERABILITY.GRID.COLUMN_ID' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'severity'">{{'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'package'">{{'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'version'">{{'VULNERABILITY.GRID.COLUMN_VERSION' | translate}} version</clr-dg-column>
        <clr-dg-column [clrDgField]="'fixedVersion'">{{'VULNERABILITY.GRID.COLUMN_FIXED' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgField]="'layer'">{{'VULNERABILITY.GRID.COLUMN_LAYER' | translate}}</clr-dg-column>
        <clr-dg-column>Description</clr-dg-column>

        <clr-dg-placeholder>{{'VULNERABILITY.GRID.PLACEHOLDER' | translate}}</clr-dg-placeholder>
        <clr-dg-row *clrDgItems="let res of scanningResults">
            <clr-dg-action-overflow>
                <button class="action-item" (click)="showDetail(res)">Detail</button>
            </clr-dg-action-overflow>
            <clr-dg-cell>{{res.id}}</clr-dg-cell>
            <clr-dg-cell>{{res.severity}}</clr-dg-cell>
            <clr-dg-cell>{{res.package}}</clr-dg-cell>
            <clr-dg-cell>{{res.version}}</clr-dg-cell>
            <clr-dg-cell>{{res.fixedVersion}}</clr-dg-cell>
            <clr-dg-cell>{{res.layer}}</clr-dg-cell>
            <clr-dg-cell>{{res.description}}</clr-dg-cell>
        </clr-dg-row>

        <clr-dg-footer>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'VULNERABILITY.GRID.FOOT_OF' | translate}} {{pagination.totalItems}} {{'VULNERABILITY.GRID.FOOT_ITEMS' | translate}}
            <clr-dg-pagination #pagination [clrDgPageSize]="25" [clrDgTotalItems]="scanningResults.length"></clr-dg-pagination>
        </clr-dg-footer>
    </clr-datagrid>
</div>
`;

export const BAR_CHART_COMPONENT_HTML: string = `
<div class="bar-wrapper">
    <div *ngIf="pending" class="bar-state">
        <button class="btn btn-link scanning-button" (click)="scanNow()">{{'VULNERABILITY.STATE.PENDING' | translate}}</button>
    </div>
    <div *ngIf="queued" class="bar-state">
        <span>{{'VULNERABILITY.STATE.QUEUED' | translate}}</span>
    </div>
    <div *ngIf="error" class="bar-state">
        <clr-icon shape="info-circle" class="is-error" size="24"></clr-icon>
        <span style="margin-left:-5px;">{{'VULNERABILITY.STATE.ERROR' | translate}}</span>
    </div>
    <div *ngIf="scanning" class="bar-state">
        <div>{{'VULNERABILITY.STATE.SCANNING' | translate}}</div>
        <div class="progress loop" style="height:2px;min-height:2px;"><progress></progress></div>
    </div>
    <div *ngIf="completed" class="bar-state">
        <hbr-scan-result-tip *ngIf="hasHigh" [severity]="2" [completeDateTime]="summary.completeTimestamp" [data]="summary.high" [percent]='percent("h")'></hbr-scan-result-tip>
        <hbr-scan-result-tip *ngIf="hasMedium" [severity]="1" [completeDateTime]="summary.completeTimestamp" [data]="summary.medium" [percent]='percent("m")'></hbr-scan-result-tip>
        <hbr-scan-result-tip *ngIf="hasLow" [severity]="0" [completeDateTime]="summary.completeTimestamp" [data]="summary.low" [percent]='percent("l")'></hbr-scan-result-tip>
        <hbr-scan-result-tip *ngIf="hasUnknown" [severity]="3" [completeDateTime]="summary.completeTimestamp" [data]="summary.unknown" [percent]='percent("u")'></hbr-scan-result-tip>
        <hbr-scan-result-tip *ngIf="hasNone" [severity]="4" [completeDateTime]="summary.completeTimestamp" [noneNumber]="summary.noneComponents" [percent]='percent("n")'></hbr-scan-result-tip>
    </div>
    <div *ngIf="unknown" class="bar-state">
        <clr-icon shape="warning" class="is-warning" size="24"></clr-icon>
        <span style="margin-left:-5px;">{{'VULNERABILITY.STATE.UNKNOWN' | translate}}</span>
    </div>
</div>
`;