<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">
        <img [src]="'../../../../assets/images/'+(raid.tier || 'null').toLowerCase()+'.png'" 
        style="object-fit: contain"
        class="col-1 col-s-3" />

        <div class="col-11 col-s-9" >
          <div class="row">
            <div class="col-12" style="padding-top: 5px">
              <h4>
                {{raid.title}}
              </h4>
            </div>
          </div>
          <div class="row" style="padding-top: 5px; padding-bottom: 5px; color:darkgray">
            <div class="col-6 col-md-3">
              <nb-icon icon="checkmark-circle"></nb-icon> {{raid.signupcount}} / {{raid.size}}<br>
            </div>
    
            <div class="col-6 col-md-3">
              <nb-icon icon="clock-outline"></nb-icon> {{raid.start | date : 'HH:mm'}}
            </div>
    
            <div class="col-12 col-md-6">
              <nb-icon icon="calendar-outline"></nb-icon> {{raid.start | date : 'EEE MMM d'}}
            </div>
          </div>
        </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>
  