<nb-card class="col-12 col-xl-9">
    <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>
        <span *ngIf="!canManage">
            <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>
        <span *ngIf="canManage">
            <input nbInput [required]="true" name="preMember" [(ngModel)]="char.charactername"><br />
            <nb-select [(selected)]="char.race" placeholder="Race">
                <nb-option *ngFor="let race of races" [value]="race">{{race}}</nb-option>
            </nb-select>
            <nb-select [(selected)]="char.specname" placeholder="Spec">
                <nb-option *ngFor="let spec of specs" [value]="spec">{{spec}}</nb-option>
            </nb-select>
            <nb-select [(selected)]="char.class" placeholder="Class" (selectedChange)="onSelectClass()">
                <nb-option *ngFor="let class of classes" [value]="class">{{class}}</nb-option>
            </nb-select>
            <button nbButton
                status="primary"
                [class.btn-pulse]="submitted"
                (click)="updateCharacter()">
                Update
            </button>
        </span>
        <span *ngIf="link === 'owner'">
            Owned by <a [routerLink]="'/frontcraft/user/'+char.username"> {{char.username}} ({{char.rank}})</a>
        </span>
    </nb-card-body>
</nb-card>