<nb-card style="width: 500px; padding: 0px 2rem 2rem 2rem">
    <nb-card-header>
      Pick Character
    </nb-card-header>
    <nb-card-body>
        <div *ngFor="let character of characters">
            <img [src]="'../../../../assets/images/'+character.class.toLowerCase()+'.png'" />
            <span [ngStyle]="{'color': character.color}">
                {{character.charactername}}
            </span>
            <br >
            <br >
            <br >

            <button
                (click)="signup(character, false)"
                nbButton 
                outline 
                status="success" 
                size="medium">
                <nb-icon icon="checkmark-outline"></nb-icon> On Time
            </button>
            &nbsp;
            &nbsp;
            &nbsp;
            <button
                (click)="signup(character, true)"
                nbButton 
                outline 
                status="warning" 
                size="medium">
                <nb-icon icon="clock-outline"></nb-icon> Late
            </button>
        </div>
    </nb-card-body>
</nb-card>