<nb-card class="col-12 col-xl-9">
    <nb-card-body>

        <div echarts [options]="options" class="echart" (chartClick)="onChartClick($event)"></div>
        
    </nb-card-body>
</nb-card>

<nb-card class="col-12 col-xl-9">
    <nb-card-body>
        <input type="text" nbInput [(ngModel)]="search" (change)="changeSearch()" placeholder="Search" fullWidth="true" />
        <table class="col-12">
                <tr *ngFor="let character of displayedcharacters">
                    <td>
                        <a style="text-transform: capitalize;"  [routerLink]="'/frontcraft/character/'+character.charactername" [ngStyle]="{'color': character.color}">
                            {{character.charactername}} <span *ngIf="character.alt">(Alt)</span>
                        </a>
                    </td>
                    <td>
                        <img style="width:20px; height:20px" [src]="'../../../../assets/images/'+character.race.toLowerCase()+'_xs.gif'" />
                        {{character.race}}
                    </td>
                    <td>
                        {{character.specname}}
                    </td>
                    <td>
                        <img style="width:20px; height:20px" [src]="'../../../../assets/images/'+character.class.toLowerCase()+'.png'" />
                        {{character.class}}
                    </td>
                </tr>
        </table>
    </nb-card-body>
</nb-card>