<div class="main term">
  <div class="text-center" *ngIf="this.isLoading">
    Loading, please wait...
  </div>

  <div class="text-center alert-error" *ngIf="this.notFound">
    User not found; check your spelling!
  </div>

  <ng-container *ngIf="this.userInfo">
    <div class="fade-stuff">
      <h1>
        <img [src]="'https://a.ppy.sh/' + this.userInfo.user_details.user_id" class="avatar">
        {{ this.userInfo.user_details.username }}
      </h1>

      <div class="mb-2 mt-2 btn-group">
        <a [href]="'https://osu.ppy.sh/users/' + this.userInfo.user_details.user_id + '/osu'"
           class="btn btn-outline-secondary btn-sm" target="_blank">
          osu!web
        </a>

        <a [href]="'https://ameobea.me/osutrack/user/' + this.userInfo.user_details.username"
           class="btn btn-outline-secondary btn-sm" target="_blank">
          osu!track
        </a>

      </div>

      <ul>
        <li *ngIf="this.userInfo.user_details.pp_raw">PP: {{ this.userInfo.user_details.pp_raw | number: '1.0-0' }}</li>
        <li *ngIf="this.userInfo.user_details.rank">Rank: #{{ this.userInfo.user_details.rank | number: '1.0-1' }}</li>
        <li *ngIf="this.userInfo.user_details.country">Country: <span class="flag" [title]="this.userInfo.user_details.country">{{ countryCodeToFlag(this.userInfo.user_details.country) }}</span> {{ this.userInfo.user_details.country }}</li>
        <li *ngIf="this.userInfo.user_details.country_rank">Country Rank: #{{ this.userInfo.user_details.country_rank | number: '1.0-1' }}</li>
      </ul>

      <ul>
        <li *ngIf="this.userInfo.user_details.join_date">Join Date: {{ this.userInfo.user_details.join_date }}</li>
        <li *ngIf="this.userInfo.user_details.seconds_played">Time Played: {{ formatDuration(this.userInfo.user_details.seconds_played) }}</li>
        <li *ngIf="this.userInfo.user_details.playcount">Playcount: {{ this.userInfo.user_details.playcount | number: '1.0-1' }}</li>
      </ul>

      <ng-container *ngIf="this.userService.isUserLoggedIn()">
        <ng-container *ngIf="!this.userInfo.queue_details.isProcessing; else updateProgress">
          <ng-container *ngIf="this.userInfo.queue_details.canUpdate">
            <a (click)="this.addUserToQueue()" class="btn btn-success pointer" target="_blank">
              update user scores now!
            </a>
          </ng-container>
          <ng-container *ngIf="!this.userInfo.queue_details.canUpdate">
            <span class="btn-warning">wait a bit to force update</span>
          </ng-container>
          <span style="margin-left: 4px">|</span>
          last update: {{ this.userInfo.queue_details.lastCompletedUpdate ? this.calculateTimeAgo(this.userInfo.queue_details.lastCompletedUpdate) : 'never'}}
        </ng-container>
        <ng-template #updateProgress>
          <div class="progress">
            <span class="btn-info">updating now!</span> <span style="margin-left: 4px">|</span> progress: {{ this.userInfo.queue_details.progressCurrent != null ? this.userInfo.queue_details.progressCurrent : "?" }}/{{ this.userInfo.queue_details.progressTotal != null ? this.userInfo.queue_details.progressTotal : "?" }}
            <ng-container *ngIf="!this.userInfo.queue_details.progressTotal && !this.userInfo.queue_details.progressCurrent; else loading">
              <span style="font-weight: bold">(in queue, be patient)</span>
            </ng-container>
            <ng-template #loading>
              <app-cute-loading></app-cute-loading>
            </ng-template>
          </div>
        </ng-template>
      </ng-container>

      <ng-container *ngIf="this.userInfo.suspicious_scores.length > 0">
        <h4>Suspicious Scores ({{ this.userInfo.suspicious_scores.length }})</h4>
        <div class="table">
          <table class="table">
            <thead>
            <tr>
              <th>Beatmap</th>
              <th>Date</th>
              <th>
                cvUR
              </th>
              <th>
                PP
              </th>
              <th></th>
            </tr>
            <tr class="filters">
              <th>
                <span title="Sort by beatmap star rating (asc)" class="pointer sorter" [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.active]="this.filterManager.filters.sorting == 'beatmap_star_rating-desc'" (click)="sortScores('beatmap_star_rating', 'desc')">▼</span>
              </th>
              <th>
                <span title="Sort by date (asc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'date-asc'" (click)="sortScores('date', 'asc')">▲</span>
                <span title="Sort by date (desc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'date-desc'" (click)="sortScores('date', 'desc')">▼</span>
              </th>
              <th>
                <span title="Sort by cvUR (asc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'ur-asc'" (click)="sortScores('ur', 'asc')">▲</span>
                <span title="Sort by cvUR (desc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'ur-desc'" (click)="sortScores('ur', 'desc')">▼</span>
              </th>
              <th>
                <span title="Sort by PP (asc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'pp-asc'" (click)="sortScores('pp', 'asc')">▲️</span>
                <span title="Sort by PP (desc)" class="pointer sorter" [class.active]="this.filterManager.filters.sorting == 'pp-desc'" (click)="sortScores('pp', 'desc')">▼</span>
              </th>
              <th></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let score of this.filteredScores">
              <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"
                         alt="Beatmap Cover" loading="lazy" width="260" height="72">
                    <div class="overlay">
                      {{ score.beatmap_title }}
                      {{ score.beatmap_star_rating | number: '1.0-1' }}★
                    </div>
                  </a>
                </div>
              </td>
              <td>{{ score.date }}</td>
              <td class="text-center">{{ score.ur | number: '1.2-2' }}</td>
              <td class="text-center">{{ score.pp | number: '1.0-1' }}</td>
              <td>
                <a [routerLink]="['/s/' + score.replay_id]" class="btn btn-outline-secondary btn-sm mb-2">
                  Details
                </a>
                <a [href]="'https://osu.ppy.sh/scores/osu/' + score.replay_id" class="btn btn-outline-secondary btn-sm" style="margin-left: 5px"
                   target="_blank">
                  osu!web
                </a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </ng-container>

      <ng-container *ngIf="this.userInfo.similar_replays.length > 0">
        <h4 class="mt-2">Similar Replays ({{ this.userInfo.similar_replays.length }})</h4>
        <table class="table">
          <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>
          </thead>
          <tbody>
          <tr *ngFor="let score of this.userInfo.similar_replays">
            <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>
      </ng-container>
    </div>
  </ng-container>
</div>
