<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" 
    [routerLink]="'/frontcraft/raid/'+raid.id" 
    class="raidlist"
    style="cursor: pointer;">
      <div class="row">
        <div class="col-2">
          <img src="../../../../assets/images/mage.png" style="height: 75px" />
        </div>

        <div class="col-2 vcenter">
          {{raid.title}}
         </div>
        
        <div class="col-2 vcenter">
          <nb-icon icon="checkmark-circle"></nb-icon> {{raid.signupcount}} / {{raid.size}}<br>
        </div>

        <div class="col-2 vcenter">
          <nb-icon icon="clock-outline"></nb-icon> {{raid.start | date : 'HH:mm'}}
        </div>

        <div class="col-4 vcenter">
          <nb-icon icon="calendar-outline"></nb-icon> {{raid.start | date : 'EEEE MMMM d'}}
        </div>
      </div>
    </nb-list-item>
  </nb-list>
</nb-card>

<nb-card class="col-12 col-xl-9">
  <nb-card-header>Previous raids</nb-card-header>
  <nb-list
    nbInfiniteList
    listenWindowScroll
    [threshold]="500">
    <nb-list-item *ngFor="let raid of oldraids" [routerLink]="'/frontcraft/archive/'+raid.id">
      <b>{{raid.title}}</b><br>
      {{raid.signupcount}} / {{raid.size}}<br>
      {{raid.start | date : 'EEEE d MMMM @ HH:mm'}}<br>
      {{raid.description}}<br>
    </nb-list-item>
  </nb-list>
</nb-card>
  