<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>
        <img style="width:20px; height:20px" [src]="'../../../../assets/images/'+char.race.toLowerCase()+'_xs.gif'" />
        {{char.race}}<br />
        <img style="width:20px; height:20px" [src]="'../../../../assets/images/'+char.class.toLowerCase()+'.png'" />
        {{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}} ]
            <wowhead [item]="token"></wowhead>
        </span>
    </nb-card-body>
</nb-card>
