<div class="row">
    <div class="col-12 col-xl-6">
        <nb-card  [size]="giant">
            <nb-card-body>
                <nb-tabset>
                    <nb-tab tabTitle="Info">
                        <h1>
                            <img [src]="'../../../../assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'"
                                style="height: 100px" />
                            {{raid.title}}
                        </h1>
                        <p>
                            {{raid.signupcount}} / {{raid.size}} signups
                        </p>
                        <p>
                            {{raid.description}}
                        </p>
                        <div *ngIf="canSignup">
                            <div *ngIf="isSignedup">

                                <p>
                                    You are signed as: {{mySignup.charactername}} ({{mySignup.race}}
                                    {{mySignup.specname}}
                                    {{mySignup.class}})<br />
                                    Status: {{mySignup.status}}
                                </p>

                                <button (click)="setLate(true)" *ngIf="mySignup.status !== 'Late'" nbButton outline
                                    status="warning" size="medium">
                                    <nb-icon icon="clock-outline"></nb-icon> Late
                                </button>
                                <button (click)="setLate(false)" *ngIf="mySignup.status === 'Late'" nbButton outline
                                    status="success" size="medium">
                                    <nb-icon icon="checkmark-outline"></nb-icon> On Time
                                </button>
                                <button (click)="unsign()" nbButton outline status="danger" size="medium">
                                    <nb-icon icon="close"></nb-icon>unsign
                                </button>
                            </div>
                            <div *ngIf="!isSignedup">
                                <button (click)="signup()" nbButton outline status="success" size="medium">
                                    <nb-icon icon="person-done-outline"></nb-icon> sign up
                                </button>
                            </div>
                        </div>
                    </nb-tab>
                    <nb-tab tabTitle="Signups" [badgeText]="raid.signupcount" badgePosition="top right"
                        [badgeStatus]="raid.signupcount<40?'warning':'success'">

                        <div class="row">
                            <nb-card class="col-12 col-md-6" *ngIf="raid.tanks.length > 0">
                                <nb-card-header>Tanks ({{raid.tanks.length}})</nb-card-header>
                                <nb-card-body>
                                    <div *ngFor="let participant of raid.tanks">
                                        <button (click)="setBench(participant)" *ngIf="manageRaid" nbButton outline
                                            status="warning" size="tiny">
                                            B
                                        </button>
                                        <button (click)="adminUnsign(participant)" *ngIf="manageRaid" nbButton outline
                                            status="danger" size="tiny">
                                            X
                                        </button>
                                        <a [ngStyle]="{'color': participant.color}" style="text-transform: capitalize;"
                                            [routerLink]="'/frontcraft/character/'+participant.charactername">
                                            <img style="width:20px; height:20px"
                                                [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
                                            <img style="width:20px; height:20px"
                                                [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                            {{ participant.charactername }}
                                        </a>
                                    </div>
                                </nb-card-body>
                            </nb-card>

                            <nb-card class="col-12 col-md-6" *ngIf="raid.tanks.length > 0">
                                <nb-card-header>Healers ({{raid.healers.length}})</nb-card-header>
                                <nb-card-body>
                                    <div *ngFor="let participant of raid.healers">
                                        <button (click)="setBench(participant)" *ngIf="manageRaid" nbButton outline
                                            status="warning" size="tiny">
                                            B
                                        </button>
                                        <button (click)="adminUnsign(participant)" *ngIf="manageRaid" nbButton outline
                                            status="danger" size="tiny">
                                            X
                                        </button>
                                        <a [ngStyle]="{'color': participant.color}" style="text-transform: capitalize;"
                                            [routerLink]="'/frontcraft/character/'+participant.charactername">
                                            <img style="width:20px; height:20px"
                                                [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
                                            <img style="width:20px; height:20px"
                                                [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                            {{ participant.charactername }}
                                        </a>
                                    </div>
                                </nb-card-body>
                            </nb-card>

                            <ng-container *ngFor="let group of raid.participants | keyvalue">
                                <nb-card class="col-12 col-md-6 col-xl-4" *ngIf="group.value.length > 0">
                                    <nb-card-header>{{group.key}} ({{group.value.length}})</nb-card-header>
                                    <nb-card-body>
                                        <div *ngFor="let participant of group.value">
                                            <button (click)="setBench(participant)" *ngIf="manageRaid" nbButton outline
                                                status="warning" size="tiny">
                                                B
                                            </button>
                                            <button (click)="adminUnsign(participant)" *ngIf="manageRaid" nbButton
                                                outline status="danger" size="tiny">
                                                X
                                            </button>
                                            <a [ngStyle]="{'color': participant.color}"
                                                style="text-transform: capitalize;"
                                                [routerLink]="'/frontcraft/character/'+participant.charactername">
                                                <img style="width:20px; height:20px"
                                                    [src]="'../../../../assets/images/'+participant.race.toLowerCase()+'_xs.gif'" />
                                                <img style="width:20px; height:20px"
                                                    [src]="'../../../../assets/images/'+participant.class.toLowerCase()+'.png'" />
                                                {{ participant.charactername }}
                                            </a>
                                        </div>
                                    </nb-card-body>
                                </nb-card>
                            </ng-container>
                        </div>
                    </nb-tab>
                    <nb-tab tabTitle="Admin" *ngIf="manageRaid">
                        <button (click)="startRaid(raid)" nbButton outline status="success" size="medium">
                            start
                        </button>
                    </nb-tab>
                </nb-tabset>
            </nb-card-body>
        </nb-card>
    </div>
    <div class="col-12 col-xl-6">
        <nb-card  *ngIf="isTier">
            <nb-card-body>
                <nb-tabset>
                    <nb-tab tabTitle="Reserves">
                        <input type="text" nbInput [(ngModel)]="search" (change)="changeSearch()" placeholder="Search"
                            fullWidth="true">

                        <nb-list>
                            <nb-list-item *ngFor="let item of displayedtokens | keyvalue">
                                <a [ngStyle]="{'color':item.value[0].quality=='Epic'?'#a335ee':'#ff8000'}"
                                    target="_blank" [href]="item.value[0].url">
                                    <img style="min-width: 25px; width: 2.25vw; max-width: 50px"
                                        [src]="'https://wow.zamimg.com/images/wow/icons/large/'+item.value[0].iconname+'.jpg'" />
                                    &nbsp;
                                    {{item.key}}
                                </a><br />
                                <div class="row">
                                    <div *ngFor="let token of item.value" class="col-12 col-md-6 col-xl-4">
                                        [ {{token.level}} ]
                                        <span style="text-transform: capitalize;"
                                            [ngStyle]="{'color':token.level>=10?'#ff8000':token.level>=8?'#a335ee':token.level>=6?'#0070dd':token.level>=4?'#1eff00':token.level>=2?'#ffffff':'#9d9d9d'}">
                                            {{token.charactername}}
                                        </span><br />
                                    </div>
                                </div>
                            </nb-list-item>
                        </nb-list>
                    </nb-tab>
                    <nb-tab tabTitle="Items" *ngIf="isSignedup">
                        <shop [tier]="raid.tier" (onSelect)="itemSelect($event)"></shop>
                    </nb-tab>
                </nb-tabset>
            </nb-card-body>
        </nb-card>
    </div>
</div>