<nb-card class="col-12 col-xl-9">
    <nb-card-body>
        <nb-tabset>
            <nb-tab tabTitle="Info">
                Smart text here
            </nb-tab>
            <nb-tab tabTitle="priorities">
                <nb-list>
                    <nb-list-item *ngFor="let item of rules | keyvalue">
                        <a [ngStyle]="{'color':item.value[0].quality=='Epic'?'#a335ee':'#ff8000'}" 
                        target="_blank" 
                        [href]="item.value[0].url">
                        <img style="min-width: 25px; width: 2.25vw; max-width: 50px" 
                        [src]="'https://wow.zamimg.com/images/wow/icons/large/'+item.value[0].iconname+'.jpg'" />
                        &nbsp;
                        {{item.key}}
                        </a><br />

                        <span *ngFor="let rule of item.value" [nbPopover]="templateRef" nbPopoverTrigger="hover">
                            <ng-template #templateRef>
                                <span style="color:white">{{rule.description}}</span>
                            </ng-template>
                            +{{rule.modifier}} {{rule.race}} <span [ngStyle]="{'color':rule.color}">{{rule.specname}} {{rule.class}}</span> <br />
                        </span>
                    </nb-list-item>
                </nb-list>
            </nb-tab>
        </nb-tabset>
    </nb-card-body>
</nb-card>

