<nb-card 
class = "col-12 col-xl-9"
status="control">
    <nb-card-header style="text-transform: capitalize;">
        <h4>
            <a *ngIf="link === 'character'" [ngStyle]="{'color': color}" [routerLink]="'/frontcraft/character/'+char.charactername">
                {{char.charactername}}
        </a>
        </h4>
        <h3>
            <span [ngStyle]="{'color': color}" *ngIf="link !== 'character'">
                {{char.charactername}}
            </span>
        </h3>
    </nb-card-header>

    <nb-card-body>
        {{char.race}}<br />
        {{char.specname}} {{char.class}}<br />
        <span *ngIf="link === 'owner'">
            Owned by <a [routerLink]="'/frontcraft/user/'+char.username"> {{char.username}} ({{char.rank}})</a>
        </span>
        <br/><br />
        <span *ngFor="let token of tokens">
            [ {{token.level}} ]
            <a [ngStyle]="{'color':token.quality=='Epic'?'#a335ee':'#ff8000'}" 
            target="_blank" 
            [href]="token.url">
            <img style="min-width: 25px; width: 2.25vw; max-width: 50px" 
            [src]="'https://wow.zamimg.com/images/wow/icons/large/'+token.iconname+'.jpg'" />
            {{token.itemname}}
            </a><br />
        </span>
    </nb-card-body>
</nb-card>
