nise/nise-frontend/src/app/banlist/banlist.component.html

<div class="main term mb-2">
  <div class="fade-stuff">
    <h1 class="mb-4"># recent bans</h1>
    <div class="alert mb-2 text-center">
      <p>
        just because an user appears on this list, <u>it doesn't mean they were banned for cheating.</u>
      </p>
      <p>there are more a multitude of reasons osu!support might close an account.</p>
      <p>
        all we do is check if the user exists (with their unique id) and if we get a "hey, it's missing" response (aka the <code>User not found! ;_;</code> message) we mark it as possibly banned.
      </p>
    </div>

    <ng-container *ngIf="this.isLoading">
      <div class="text-center">
        <p>Loading <app-cute-loading></app-cute-loading></p>
        <p>please be patient - the database is working hard!</p>
      </div>
    </ng-container>

    <ng-template #nullTemplate>
      <code>null</code>
    </ng-template>
    <table *ngIf="this.banlist">
      <thead>
      <tr>
        <th colspan="2">Username</th>
        <th>Time played</th>
        <th>Total PP</th>
        <th>Rank</th>
        <th>Last check</th>
        <th>Approximate ban date</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let user of this.banlist.users">
        <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.lastUpdate; else nullTemplate">
            {{ calculateTimeAgo(user.lastUpdate) }}
          </ng-container>
        </td>
        <td>
          {{ user.approximateBanTime | date: 'medium' }}
        </td>
        <td>
        </td>
      </tbody>
    </table>

  </div>
</div>