<div class="header">
  <div>
    <a [routerLink]="['/']">
      <img src="/assets/keisatsu-chan.png" class="header-image" alt="keisatsu-chan~!">
    </a>
  </div>
  <div>
    <h2 style="margin-top: 6px">/nise.stedos.dev/</h2>
    <ul style="font-size: 15px; line-height: 19px;">
      <li><a [routerLink]="['/']">./home</a></li>
      <li><a [routerLink]="['/sus']">./suspicious-scores</a></li>
      <li><a [routerLink]="['/stolen']">./stolen-replays</a></li>
      <li><a [routerLink]="['/search']">./advanced-search</a></li>
    </ul>
    <form (ngSubmit)="onSubmit()">
      <input style="width: 100%" type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}" id="nise-osu-username" required minlength="2" maxlength="50" placeholder="Search for users...">
    </form>
    <div style="margin-top: 3px">
      <ng-container *ngIf="this.userService.isUserLoggedIn()">
        hi, <span class="user-details" [title]="this.userService.currentUser?.username"><a [routerLink]="['/profile']"> {{this.userService.currentUser?.username}}</a></span> <a class="logout-btn" [href]="this.userService.getLogoutUrl()">Logout</a>
      </ng-container>
      <ng-container *ngIf="!this.userService.isUserLoggedIn()">
        <a [href]="this.userService.getLoginUrl()">Login</a>
      </ng-container>
    </div>
  </div>
</div>
<div class="main term text-center statistics">
  Players: {{ this.statistics?.total_users | number }} | Beatmaps: {{ this.statistics?.total_beatmaps | number }} | Scores: {{ this.statistics?.total_scores | number }}
  <ng-container *ngIf="this.statistics?.total_bans">
    | <a [routerLink]="['/banlist']">Bans: {{ this.statistics?.total_bans | number }}</a>
  </ng-container>
</div>

<router-outlet></router-outlet>
<div class="text-center version">
  v20241105
</div>
