<div class="main term">
  <h1><span class="board" title="Short form of「盗む」[nu-su-mu] - to steal in Japanese.">/nu/</span> - Stolen Replays</h1>
  <div class="alert mb-2">
    This includes all replays pairs with a <10 similarity ratio. Low values can indicate replay hacking but always
    manually check everything.
  </div>
  <fieldset>
    <legend>
      Filter results
      <button [disabled]="!this.filterManager.hasValueChanged()" (click)="this.resetValues()">Clear filters</button>
      <button [disabled]="!this.filterManager.hasValueChanged() || this.isUrlFilters" (click)="this.getFiltersUrl()" title="Get a permanent link to the filters. Share or save it to your bookmarks!">Share filters</button>
    </legend>
    <!-- Min PP -->
    <p>
      <label for="minPP" class="form-label">Min PP</label>
      <input class="form-control" type="number" id="minPP" [(ngModel)]="this.filterManager.filters.minPP" (input)="filterScores()"
             [readOnly]="this.isUrlFilters" [disabled]="this.isUrlFilters">
    </p>

    <!-- Max PP -->
    <p>
      <label for="maxPP" class="form-label">Max PP</label>
      <input class="form-control" type="number" id="maxPP" [(ngModel)]="this.filterManager.filters.maxPP" (input)="filterScores()"
             [readOnly]="this.isUrlFilters" [disabled]="this.isUrlFilters">
    </p>

    <!-- Min Similarity -->
    <p>
      <label for="minSimilarity" class="form-label">Min similarity</label>
      <input class="form-control" type="number" id="minSimilarity" [(ngModel)]="this.filterManager.filters.minSimilarity" (input)="filterScores()"
             [readOnly]="this.isUrlFilters" [disabled]="this.isUrlFilters">
    </p>

    <!-- Max Similarity -->
    <p>
      <label for="maxSimilarity" class="form-label">Max similarity</label>
      <input class="form-control" type="number" id="maxSimilarity" [(ngModel)]="this.filterManager.filters.maxSimilarity" (input)="filterScores()"
             [readOnly]="this.isUrlFilters" [disabled]="this.isUrlFilters">
    </p>

    <!-- Search Username -->
    <p>
      <label for="searchUsername" class="form-label">Username</label>
      <input class="form-control" type="text" id="searchUsername" [(ngModel)]="this.filterManager.filters.searchUsername" (input)="filterScores()"
             [readOnly]="this.isUrlFilters" [disabled]="this.isUrlFilters">
    </p>

    <!-- Search Beatmap -->
    <p>
      <label for="searchBeatmap" class="form-label">Beatmap</label>
      <input class="form-control" type="text" id="searchBeatmap" [(ngModel)]="this.filterManager.filters.searchBeatmap" (input)="filterScores()"
             [readOnly]="this.isUrlFilters" [disabled]="this.isUrlFilters">
    </p>
  </fieldset>

  <div *ngIf="getTotalPages() > 1" style="padding: 20px">
    <p class="text-center">
      Page: {{ this.currentPage }} / {{ this.getTotalPages() }}
    </p>
    <div>
      <button (click)="currentPage = currentPage - 1" [disabled]="currentPage === 1" style="float: left">Previous page</button>
      <button (click)="currentPage = currentPage + 1" [disabled]="currentPage === getTotalPages()" style="float: right">Next page</button>
    </div>
  </div>

  <table class="table mt-4">
    <thead>
    <tr>
      <th>Beatmap</th>
      <th style="text-align: start">Replay 1 Details</th>
      <th style="text-align: start">Replay 2 Details</th>
      <th>Similarity</th>
      <th></th>
    </tr>
    <tr class="filters">
      <th>
        <span title="Sort by beatmap star rating (asc)" class="pointer sorter" [class.disabled]="this.isUrlFilters" [class.active]="this.filterManager.filters.sorting == 'beatmap_star_rating-asc'" (click)="sortScores('beatmap_star_rating', 'asc')">▲</span>
        <span title="Sort by beatmap star rating (desc)" class="pointer sorter" [class.disabled]="this.isUrlFilters" [class.active]="this.filterManager.filters.sorting == 'beatmap_star_rating-desc'" (click)="sortScores('beatmap_star_rating', 'desc')">▼</span>
      </th>
      <th>
        <span style="float: left" title="Sort by date (asc)" class="pointer sorter" [class.disabled]="this.isUrlFilters" [class.active]="this.filterManager.filters.sorting == 'replay_date_1-asc'" (click)="sortScores('replay_date_1', 'asc')">▲</span>
        <span style="float: left" title="Sort by date (desc)" class="pointer sorter" [class.disabled]="this.isUrlFilters" [class.active]="this.filterManager.filters.sorting == 'replay_date_1-desc'" (click)="sortScores('replay_date_1', 'desc')">▼</span>
      </th>
      <th>
        <span style="float: left" title="Sort by date (asc)" class="pointer sorter" [class.disabled]="this.isUrlFilters" [class.active]="this.filterManager.filters.sorting == 'replay_date_2-asc'" (click)="sortScores('replay_date_2', 'asc')">▲</span>
        <span style="float: left" title="Sort by date (desc)" class="pointer sorter" [class.disabled]="this.isUrlFilters" [class.active]="this.filterManager.filters.sorting == 'replay_date_2-desc'" (click)="sortScores('replay_date_2', 'desc')">▼</span>
      </th>
      <th>
        <span title="Sort by similarity (asc)" class="pointer sorter" [class.disabled]="this.isUrlFilters" [class.active]="this.filterManager.filters.sorting == 'similarity-asc'" (click)="sortScores('similarity', 'asc')">▲</span>
        <span title="Sort by similarity (desc)" class="pointer sorter" [class.disabled]="this.isUrlFilters" [class.active]="this.filterManager.filters.sorting == 'similarity-desc'" (click)="sortScores('similarity', 'desc')">▼</span>
      </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let score of this.getCurrentPage()">
      <td>
        <div class="image-container">
          <a href="https://osu.ppy.sh/beatmaps/{{ score.beatmap_id }}?mode=osu" target="_blank">
            <img ngSrc="https://assets.ppy.sh/beatmaps/{{ score.beatmap_beatmapset_id }}/covers/cover.jpg" width="260" height="72"
                 alt="Beatmap Cover" loading="lazy">
            <div class="overlay">
              {{ score.beatmap_title }}
              {{ score.beatmap_star_rating | number: '1.0-1' }}★
            </div>
          </a>
        </div>
      </td>
      <td class="replay-n-details">
        <a href="https://osu.ppy.sh/scores/osu/{{ score.replay_id_1 }}" target="_blank">
          {{ score.replay_date_1 }}
          <br>
          User: {{ score.username_1 }}
          <br>
          PP: {{ score.replay_pp_1 | number: '1.0-0' }}
        </a>
      </td>
      <td class="replay-n-details">
        <a href="https://osu.ppy.sh/scores/osu/{{ score.replay_id_2 }}" target="_blank">
          {{ score.replay_date_2 }}
          <br>
          User: {{ score.username_2 }}
          <br>
          PP: {{ score.replay_pp_2 | number: '1.0-0' }}
        </a>
      </td>
      <td class="text-center">{{ score.similarity | number: '1.0-2' }}</td>
      <td>
        <a [routerLink]="['/p/' + score.replay_id_1 + '/' + score.replay_id_2]" class="btn mr-1">
          Details
        </a>
      </td>
    </tr>
    </tbody>
  </table>
</div>
