<div class="main term mb-2">
  <div class="fade-stuff">
    <h1 class="mb-4"><span class="text-muted">hi,</span> {{ this.userService.currentUser?.username }}</h1>

    <h1># follow-list</h1>
    <div class="text-center">
      <p>You can follow users by going on their profile and clicking the <code>(+) Add follow</code> buttan.</p>
    </div>
    <ng-template #noFollows>
      <div class="text-center">
        <p>You are not following anyone!</p>
      </div>
    </ng-template>
    <ng-template #nullTemplate>
      <code>null</code>
    </ng-template>
    <ng-container *ngIf="this.follows && this.follows.follows.length > 0; else noFollows">
      <fieldset class="mb-2">
        <legend>tools</legend>
        <div class="text-center">
          <button (click)="this.downloadFilesService.downloadCSV(this.follows.follows, ['userId', 'username', 'secondsPlayed', 'pp', 'rank', 'isBanned', 'approximateBanTime', 'lastUpdate'], 'nise-follows')">Download .csv</button>
          <button (click)="this.downloadFilesService.downloadJSON(this.follows.follows, 'nise-follows')">Download .json</button>
          <button (click)="this.downloadFilesService.downloadXLSX(this.follows.follows, 'nise-follows')">Download .xlsx</button>
        </div>
      </fieldset>
      <table>
        <thead>
        <tr>
          <th colspan="2">Username</th>
          <th>Time played</th>
          <th>Total PP</th>
          <th>Rank</th>
          <th>Is banned?</th>
          <th>Last check</th>
          <th>Approximate ban date</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let user of this.follows.follows">
          <td>
            <img [src]="'https://a.ppy.sh/' + user.userId" class="avatar" style="width: 16px; min-height: 16px; height: 16px;" loading="lazy">
          </td>
          <td>
            <a [routerLink]="['/u', user.username]">
              {{ user.username }}
            </a>
          </td>
          <td>
            <ng-container *ngIf="user.secondsPlayed else nullTemplate">
              {{ formatDuration(user.secondsPlayed) }}
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="user.pp; else nullTemplate">
              {{ user.pp | number: '1.0-0' }}
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="user.rank; else nullTemplate">
              #{{ user.rank | number }}
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="user.isBanned;">
              yes
            </ng-container>
            <ng-container *ngIf="!user.isBanned;">
              nope
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="user.lastUpdate; else nullTemplate">
              {{ calculateTimeAgo(user.lastUpdate) }}
            </ng-container>
          </td>
          <td>
            <ng-container *ngIf="user.approximateBanTime; else nullTemplate">
              {{ user.approximateBanTime | date: 'medium' }}
            </ng-container>
          </td>
          <td>
          </td>
        </tbody>
      </table>
    </ng-container>
  </div>
</div>
