<nb-card class="col-12 col-xl-9">
  <nb-card-header>
    Upcoming raids
    <nb-icon style="color:orange" *ngIf="manageRaid" (click)="create()" icon="plus-square-outline"></nb-icon>
  </nb-card-header>
  <nb-list nbInfiniteList listenWindowScroll [threshold]="500">
    <nb-list-item *ngFor="let raid of raids" class="raidlist">
      <a [routerLink]="'/frontcraft/raid/'+raid.id">
        <table>
          <tr>
            <td rowspan="2" style="padding-right: 20px;">
              <img [src]="'/assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'"
                style="max-width: 50px; object-fit: contain" />
            </td>
            <td>
              <h4>
                {{raid.title}}
              </h4>
            </td>
          </tr>
          <tr class="row">
            <td class="col-3" style="padding-left:8px; padding-right: 25px; white-space: nowrap; color: lightslategray;">
              <nb-icon icon="checkmark-circle"></nb-icon>&nbsp;{{ raid.signupcount | number:'2.0' }}&nbsp;/&nbsp;{{raid.size}}
            </td>
            <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
              <nb-icon icon="person-remove-outline"></nb-icon>&nbsp;{{ raid.benchcount }}
            </td>
            <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
              <nb-icon icon="clock-outline"></nb-icon>&nbsp;{{raid.start | date : 'HH:mm'}}
            </td>
            <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
              <nb-icon icon="calendar-outline"></nb-icon>&nbsp;{{raid.start | date : 'EEE MMM d'}}
            </td>
          </tr>
        </table>
      </a>
    </nb-list-item>
  </nb-list>
</nb-card>

<nb-card class="col-12 col-xl-9">
  <nb-card-header>Previous raids (Limit <input nbInput style="width: 100px;" type="number" [(ngModel)]="archiveCount" (change)="refresh()" /> 
    Showing only tier 
    <nb-select [(selected)]="tier" placeholder="Tier" (selectedChange)="refresh()">
      <nb-option *ngFor="let _tier of tiers" [value]="_tier">
        {{_tier}}
      </nb-option>
    </nb-select>
    )
  </nb-card-header>
  <nb-list nbInfiniteList listenWindowScroll [threshold]="500">
    <nb-list-item *ngFor="let raid of oldraids" [routerLink]="'/frontcraft/archive/'+raid.id">
      <a [routerLink]="'/frontcraft/archive/'+raid.id">
          <table style="width: 100%;">
            <tr>
              <td rowspan="2" style="padding-right: 20px;">
                <img [src]="'/assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'"
                  style="max-width: 50px;;object-fit: contain; filter: grayscale(75%)" />
              </td>
              <td>
                <h4>
                  {{raid.title}}
                </h4>
              </td>
            </tr>
            <tr class="row">
              <td class="col-3" style="padding-left:8px; padding-right: 25px; white-space: nowrap; color: lightslategray;">
                <nb-icon icon="checkmark-circle"></nb-icon>&nbsp;{{ raid.signupcount | number:'2.0' }}&nbsp;/&nbsp;{{raid.size}}
              </td>
              <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
                <nb-icon icon="person-remove-outline"></nb-icon>&nbsp;{{ raid.participants.bench.length }}
              </td>
              <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
                <nb-icon icon="clock-outline"></nb-icon>&nbsp;{{raid.start | date : 'HH:mm'}}
              </td>
              <td class="col-3" style="padding-right: 25px; white-space: nowrap; color: lightslategray;">
                <nb-icon icon="calendar-outline"></nb-icon>&nbsp;{{raid.start | date : 'EEE MMM d'}}
              </td>
            </tr>
          </table>
      </a>
    </nb-list-item>
  </nb-list>
</nb-card>