<nb-card class="col-12 col-xl-9">
    <nb-card-body>
        <nb-tabset>
            <nb-tab tabTitle="Info">
                <h1>{{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)="unsign()"
                            nbButton 
                            outline 
                            status="danger" 
                            size="medium">
                            unsign
                        </button>                    
                    </div>
                    <div *ngIf="!isSignedup">
                        <button
                            (click)="signup()"
                            nbButton 
                            outline 
                            status="success" 
                            size="medium">
                            signup
                        </button>                     
                    </div>
                </div>
            </nb-tab>
            
            <nb-tab tabTitle="Signups"
              [badgeText]="raid.signupcount"
              badgePosition="top right"
              [badgeStatus]="raid.signupcount<40?'warning':'success'">
                <div class="row">
                    <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>
                                    <a [ngStyle]="{'color': participant.color}" style="text-transform: capitalize;" 
                                    [routerLink]="'/frontcraft/character/'+participant.charactername">
                                    {{ participant.charactername }}
                                    </a>
                                </div>
                            </nb-card-body>
                        </nb-card>
                    </ng-container>
                </div>
            </nb-tab>
            <nb-tab tabTitle="Shop">
                <shop (onSelect)="itemSelect($event)"></shop>
            </nb-tab>
            <nb-tab tabTitle="Reserves">
                <nb-list>
                    <nb-list-item *ngFor="let item of raid.tokens | 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="Admin" *ngIf="manageRaid">
                <button
                    (click)="startRaid(raid)"
                    nbButton 
                    outline 
                    status="success" 
                    size="medium">
                    start
                </button>

                <button
                    (click)="archiveRaid(raid)"
                    nbButton 
                    outline 
                    status="danger" 
                    size="medium">
                    archive
                </button>
            </nb-tab>
        </nb-tabset>
    </nb-card-body>
</nb-card>

