<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 }}
</div>

<div class="main container">

  <div class="subcontainer">
    <div class="term">
      <h1># Welcome to [nise.moe]</h1>
      <h3>wtf is this?</h3>
      <p>This application will automatically crawl [osu!std] top scores and search for stolen replays or obvious relax/timewarp scores.</p>
      <p>It started collecting replays on <i>2024-01-12</i></p>
      <p>This website is not affiliated with the osu! game nor ppy. It is an unrelated, unaffiliated, 3rd party project.</p>
      <p>If you have any suggestions or want to report bugs, feel free to join the Discord server below.</p>
      <div class="text-center mt-4">
        <a href="https://discord.gg/wn4gWpA36w" target="_blank" class="btn">Join the Discord!</a>
      </div>
      <h3 class="mt-4"># do you use rss? (nerd)</h3>
      <p>you can keep up with newly detected scores with the rss feed, subscribe to it using your favorite reader.</p>
      <div class="text-center">
        <a href="https://nise.moe/api/rss.xml" target="_blank">
          <img title="rss-chan!" src="/assets/rss.png" width="64" style="filter: grayscale(40%) sepia(10%) brightness(90%);">
          <br>
          <span style="padding: 2px; border: 1px dotted #b3b8c3;">
                  Get the feed
        </span>
        </a>
      </div>
    </div>
  </div>

  <div class="subcontainer">

    <input type="file" id="fileUpload" style="display: none" (change)="this.uploadReplay($event)"
           accept=".osr">

    <label for="fileUpload" class="btn pointer text-center upload-button" [class.disabled]="this.loading">
      <ng-container *ngIf="this.loading; else buttonBody">
        Processing
        <app-cute-loading></app-cute-loading>
      </ng-container>
      <ng-template #buttonBody>
        Upload Replay!
      </ng-template>
    </label>

    <div class="term" style="width: 100%; padding: 0">
      <div class="text-center" style="font-weight: bold; font-size: 14px; padding-bottom: 10px; padding-top: 16px">
        <img src="/assets/new.png" width="48" style="  filter: grayscale(30%) sepia(20%) brightness(90%);">
        <br>
        <ng-container *ngIf="this.wantsConnection">new <span style="margin-right: 4px" class="text-has-info " title="this feed includes any score - this does not mean they're cheating.">scores</span> <span style="color: rgba(36,255,114,0.65); filter: grayscale(40%)">[live]</span></ng-container>
        <ng-container *ngIf="!this.wantsConnection">new <span style="margin-right: 4px" class="text-has-info " title="this feed includes any score - this does not mean they're cheating.">scores</span> <span style="color: rgba(234,64,29,0.92); filter: grayscale(40%)">[disconnected]</span></ng-container>
        <br>
        <button (click)="this.toggleConnection()" style="margin-top: 4px;">
          <ng-container *ngIf="this.wantsConnection">Disconnect</ng-container>
          <ng-container *ngIf="!this.wantsConnection">Connect</ng-container>
        </button>
      </div>
      <ng-container *ngIf="this.liveScores.length <= 0">
        <p class="text-center text-muted">
          nothing yet...<br>
          new scores will appear here.
        </p>
      </ng-container>
      <div style="overflow-y: scroll; max-height: 495px; padding: 16px">
        <ng-container *ngFor="let replay of this.liveScores">
          <div style="margin-bottom: 6px">
            <a [routerLink]="['/s/' + replay.replay_id]">
              <div style="border: 1px dotted rgba(204,204,204,0.4); padding: 4px; font-size: 13px">
                <ul style="list-style: none; padding-left: 10px;">
                  <li>User: {{ replay.username }}</li>
                  <li>Date: {{ replay.date }}</li>
                  <li>PP: {{ replay.pp | number: '1.0-0' }}</li>
                  <li>cvUR: {{ replay.ur | number: '1.2-2' }}</li>
                </ul>
              </div>
            </a>
          </div>
        </ng-container>
      </div>


    </div>

  </div>


</div>
