<div class="row">
    <div class="col-12 col-xl-6">
        <nb-card>
            <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 style="white-space: pre-line;">
                            {{raid.description}}
                        </p>
                        <p>
                            {{raid.start | date : 'EEE MMM d'}} {{raid.start | date : 'HH:mm'}}
                        </p>
                        <div *ngIf="canSignup">
                            <div *ngIf="isSignedup" style="width: 100%;">
                                <p style="white-space: pre-line;">
                                    You are signed as: <span
                                        style="text-transform: capitalize; word-break: keep-all;">{{mySignup.charactername}}</span>
                                    ({{mySignup.race}} {{mySignup.specname}} {{mySignup.class}})
                                    <br />
                                    Status: {{mySignup.status}}<br /><br />
                                    <textarea fullWidth *ngIf="mySignup.status !== 'Absent'"
                                        [status]="mySignup.status === 'Attending'?'success':'warning'"
                                        placeholder="Add a note (optional)" rows="10" cols="50" nbInput
                                        style="white-space: pre-line;" [(ngModel)]="mySignup.memo">
                                    </textarea>
                                </p>

                                <button *ngIf="mySignup.status !== 'Attending'" (click)="setLate(false)" nbButton
                                    fullWidth outline status="success" size="medium">
                                    <nb-icon icon="checkmark-outline"></nb-icon> On Time
                                </button>
                                <button *ngIf="mySignup.status === 'Attending'" (click)="setLate(false)" nbButton
                                    fullWidth outline status="success" size="medium">
                                    <nb-icon icon="checkmark-outline"></nb-icon> Update
                                </button>
                                <button *ngIf="mySignup.status === 'Late'" (click)="setLate(true)" nbButton fullWidth
                                    outline status="warning" size="medium">
                                    <nb-icon icon="clock-outline"></nb-icon> Update
                                </button>
                                <button *ngIf="mySignup.status !== 'Late'" (click)="setLate(true)" nbButton fullWidth
                                    outline status="warning" size="medium">
                                    <nb-icon icon="clock-outline"></nb-icon> Late
                                </button>
                                <button *ngIf="mySignup.status !== 'Absent'" (click)="setAbsent()" nbButton fullWidth
                                    outline status="danger" size="medium">
                                    <nb-icon icon="person-delete-outline"></nb-icon> Absent
                                </button>
                                <p>&nbsp;</p>
                                <button (click)="unsign()" nbButton fullWidth status="danger" size="medium">
                                    <nb-icon icon="close"></nb-icon>unsign
                                </button>
                            </div>
                            <div *ngIf="!isSignedup">
                                <button (click)="signup()" fullWidth 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)="adminSetAbsent(participant)" *ngIf="manageRaid" nbButton outline
                                            status="info" size="tiny">
                                            A
                                        </button>
                                        <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>

                                        <ng-template #timeInfo>
                                            <div style="padding: 10px">
                                                {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
                                                ({{participant.before | date : 'dd'}} days before start)
                                            </div>
                                        </ng-template>
                                        <nb-icon [nbPopover]="timeInfo" nbPopoverTrigger="hover"
                                            style="width: 0.75em; height: 0.75em;" icon="clock-outline"
                                            [status]="participant.before>8.64e+7?(participant.before>2.592e+8?'success':'warning'):'danger'">
                                        </nb-icon>
                                        <ng-template #memoBox>
                                            <div style="padding: 10px">
                                                <p
                                                    style="white-space: pre-line; max-width: 50vw; word-wrap: break-word;">
                                                    {{participant.memo}}
                                                </p>
                                            </div>
                                        </ng-template>
                                        <nb-icon *ngIf="participant.memo" [nbPopover]="memoBox" nbPopoverTrigger="hover"
                                            style="width: 0.75em; height: 0.75em;" icon="message-circle-outline">
                                        </nb-icon>

                                        <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                            Trial
                                        </span>
                                    </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)="adminSetAbsent(participant)" *ngIf="manageRaid" nbButton
                                            outline status="info" size="tiny">
                                            A
                                        </button>
                                        <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>
                                        <ng-template #timeInfo>
                                            <div style="padding: 10px">
                                                {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
                                                ({{participant.before | date : 'dd'}} days before start)
                                            </div>
                                        </ng-template>
                                        <nb-icon [nbPopover]="timeInfo" nbPopoverTrigger="hover"
                                            style="width: 0.75em; height: 0.75em;" icon="clock-outline"
                                            [status]="participant.before>8.64e+7?(participant.before>2.592e+8?'success':'warning'):'danger'">
                                        </nb-icon>
                                        <ng-template #memoBox>
                                            <div style="padding: 10px">
                                                <p
                                                    style="white-space: pre-line; max-width: 50vw; word-wrap: break-word;">
                                                    {{participant.memo}}
                                                </p>
                                            </div>
                                        </ng-template>
                                        <nb-icon *ngIf="participant.memo" [nbPopover]="memoBox" nbPopoverTrigger="hover"
                                            style="width: 0.75em; height: 0.75em;" icon="message-circle-outline">
                                        </nb-icon>
                                        <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                            Trial
                                        </span>
                                    </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)="adminSetAbsent(participant)" *ngIf="manageRaid" nbButton
                                                outline status="info" size="tiny">
                                                A
                                            </button>
                                            <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>
                                            <ng-template #timeInfo>
                                                <div style="padding: 10px">
                                                    {{participant.timestamp | date : 'HH:mm EEE MMM d'}}
                                                    ({{participant.before | date : 'dd'}} days before start)
                                                </div>
                                            </ng-template>
                                            <nb-icon [nbPopover]="timeInfo" nbPopoverTrigger="hover"
                                                style="width: 0.75em; height: 0.75em;" icon="clock-outline"
                                                [status]="participant.before>8.64e+7?(participant.before>2.592e+8?'success':'warning'):'danger'">
                                            </nb-icon>
                                            <ng-template #memoBox>
                                                <div style="padding: 10px">
                                                    <p
                                                        style="white-space: pre-line; max-width: 50vw; word-wrap: break-word;">
                                                        {{participant.memo}}
                                                    </p>
                                                </div>
                                            </ng-template>
                                            <nb-icon *ngIf="participant.memo" [nbPopover]="memoBox"
                                                nbPopoverTrigger="hover" style="width: 0.75em; height: 0.75em;"
                                                icon="message-circle-outline">
                                            </nb-icon>
                                            <span *ngIf="participant.rank=='Trial'" style="font-size: 9px;">
                                                Trial
                                            </span>
                                        </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>
                        <button (click)="cancelRaid(raid)" nbButton outline status="danger" size="medium">
                            cancel
                        </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" [active]="reservesShown">
                        <input type="text" nbInput [(ngModel)]="search" (change)="changeSearch()" placeholder="Search"
                            fullWidth="true">

                        <nb-list class="">
                            <nb-list-item *ngFor="let item of displayedtokens | keyvalue">
                                <table style="width: 100%;">
                                    <tr>
                                        <td>
                                            <wowhead [item]="item.value[0]"></wowhead><br />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="row">
                                            <div *ngFor="let token of item.value" class="col-12 col-md-6 col-xl-4"
                                                style="white-space: nowrap;">
                                                <span
                                                    [ngStyle]="{'text-decoration': token.rank=='Trial'? 'line-through' : 'none currentcolor solid' }">
                                                    <span style="text-transform: capitalize;">
                                                        <button (click)="decreaseReserve(token)" *ngIf="changeReserve" nbButton
                                                            outline status="warning" size="tiny">
                                                            -
                                                        </button>
                                                        [ {{token.level}} ]&nbsp;
                                                        <button (click)="increaseReserve(token)" *ngIf="changeReserve" nbButton
                                                            outline status="warning" size="tiny">
                                                            +
                                                        </button>
                                                        <a [routerLink]="'/frontcraft/character/'+token.charactername"
                                                            [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}}
                                                        </a>
                                                    </span>
                                                </span>
                                                <ng-template #tooltip>
                                                    <div style="color:white">
                                                        Becomes valid when promoted to Raider
                                                    </div>
                                                </ng-template>
                                                <span *ngIf="token.rank=='Trial'" style="font-size: 9px;"
                                                    [nbPopover]="tooltip" nbPopoverTrigger="hover"
                                                    nbPopoverPlacement="top">
                                                    &nbsp;Trial
                                                </span><br />
                                            </div>

                                        </td>
                                    </tr>
                                </table>
                            </nb-list-item>
                        </nb-list>
                    </nb-tab>
                    <nb-tab tabTitle="Items" *ngIf="isSignedup" [active]="!reservesShown">
                        <shop [tier]="raid.tier" (onSelect)="itemSelect($event)"></shop>
                    </nb-tab>
                </nb-tabset>
            </nb-card-body>
        </nb-card>
    </div>
</div>