<!-- Please do further testing with a ton of servers in the list and names that are too long/contain symbols -->

<div class="server-list-action-bar">
  <div class="server-list-actions">
    <button (click)="cancel()">
      {{ 'COMPONENT.SERVER_LIST.BACK' | transloco }}
    </button>
    <button
      [disabled]="loader.serverlist.inProgress$ | async"
      (click)="updateServerList()"
    >
      {{ 'COMPONENT.SERVER_LIST.REFRESH' | transloco }}
    </button>
  </div>

  <hr/>

  <div class="server-list-filters">
    <input
      class="search-list-server"
      [formControl]="formSearch"
      type="text"
      [placeholder]="'COMPONENT.SERVER_LIST.SEARCH' | transloco"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="off"
      spellcheck="false"
    />

    <div class="filter-checkbox">
      <input
        type="checkbox"
        id="hide-version-mismatched-servers-checkbox"
        [ngModel]="hideVersionMismatchedServers | async"
        (ngModelChange)="onHideVersionMismatchedServers($event)"
      />
      <label for="hide-version-mismatched-servers-checkbox">
        {{ 'COMPONENT.SERVER_LIST.HIDE_MISMATCHED_SERVERS' | transloco }}
      </label>
    </div>

    <div class="filter-checkbox">
      <input
        type="checkbox"
        id="hide-full-servers-checkbox"
        [ngModel]="hideFullServers | async"
        (ngModelChange)="onHideFullServers($event)"
      />
      <label for="hide-full-servers-checkbox">
        {{ 'COMPONENT.SERVER_LIST.HIDE_FULL_SERVERS' | transloco }}
      </label>
    </div>

    <div class="filter-checkbox">
      <input
        type="checkbox"
        id="hide-password-protected-servers-checkbox"
        [ngModel]="hidePasswordProtectedServers | async"
        (ngModelChange)="onHidePasswordProtectedServers($event)"
      />
      <label for="hide-password-protected-servers-checkbox">
        {{ 'COMPONENT.SERVER_LIST.HIDE_PASSWORD_PROTECTED_SERVERS' | transloco }}
      </label>
    </div>
  </div>


  <div class="server-count">
    {{
    'COMPONENT.SERVER_LIST.SERVER_COUNT'
      | transloco
      : {
        filteredCount: (filteredServerlist$ | async)?.length ?? 0,
        count: (serverlist$ | async)?.length ?? 0
      }
    }}
  </div>
</div>

<ng-container *ngIf="filteredServerlist$ | async as serverlist">
  <div
    *ngIf="loader.serverlist.inProgress$ | async; else notLoading"
    class="serverlist-alternative serverlist-loading"
  >
    {{ 'COMPONENT.SERVER_LIST.LOADING' | transloco }}
  </div>

  <ng-template #notLoading>
    <div class="server-list">
      <div class="scrollbar-offset">
        <div class="server-list-table">
          <div class="row header">
            <div style="width: 1.55em">
              <fa-icon [icon]="fasLock"></fa-icon>
            </div>
            <div>
              {{ 'COMPONENT.SERVER_LIST.TABLE_HEADERS.NAME' | transloco }}
              <app-order
                [sortingOrder]="serverNameOrdering | async"
                (sorted)="sortServerName($event)"
              ></app-order>
            </div>
            <div style="width: 7em">
              {{ 'COMPONENT.SERVER_LIST.TABLE_HEADERS.PLAYERS' | transloco }}
              <app-order
                [sortingOrder]="playerCountOrdering | async"
                (sorted)="sortPlayerCount($event)"
              ></app-order>
            </div>
            <!-- <div style="width: 6em">-->
            <!--   {{ 'COMPONENT.SERVER_LIST.TABLE_HEADERS.COUNTRY' | transloco }}-->
            <!--   <app-order [isIncreasingOrder]="countryOrdering | async" (sorted)="sortCountry($event)"></app-order>-->
            <!-- </div>-->
            <div style="width: 5em">{{ clientVersion$ | async }}</div>
            <div style="width: 6em">
              {{ 'COMPONENT.SERVER_LIST.TABLE_HEADERS.FAVORITE' | transloco }}
              <app-order
                [sortingOrder]="favoriteOrdering | async"
                (sorted)="sortFavorite($event)"
              ></app-order>
            </div>
            <div style="width: 4em"></div>
          </div>
        </div>
      </div>

      <div class="serverlist-alternative" *ngIf="serverlist.length === 0">
        {{ 'COMPONENT.SERVER_LIST.NO_SERVERS' | transloco }}
      </div>

      <cdk-virtual-scroll-viewport
        *ngIf="serverlist.length !== 0"
        [itemSize]="rowHeight$ | async"
        class="virtual-viewport"
      >
        <div class="server-list-table">
          <div
            *cdkVirtualFor="let server of serverlist; let odd = odd"
            class="row"
            [class.odd]="odd"
          >
            <div style="width: 1.55em">
              <fa-icon *ngIf="server.hasPassword" [icon]="fasLock"></fa-icon>
            </div>
            <div>{{ server.name }}</div>
            <div style="width: 7em">
              {{ server.player_count }} / {{ server.max_player_count }}
            </div>
            <!-- <div style="width: 6em">{{ server.country }}</div>-->
            <div
              style="width: 5em"
              [ngClass]="
                server.isCompatible
                  ? 'server-compatible'
                  : 'server-incompatible'
              "
            >
              {{ server.shortVersion }}
            </div>
            <div
              style="width: 6em"
              class="server-list-favorite"
              [class.not]="!server.isFavorite"
              (click)="toggleServerFavorite(server)"
            >
              <fa-icon [icon]="server.isFavorite ? fasStar : farStar"></fa-icon>
            </div>
            <div style="width: 4em">
              <button
                (click)="server.hasPassword ? connectWithPassword(server) : connect(server)"
                class="join-button"
                [disabled]="!server.isCompatible"
              >
                {{ 'COMPONENT.SERVER_LIST.JOIN' | transloco }}
              </button>
            </div>
          </div>
        </div>
      </cdk-virtual-scroll-viewport>
    </div>
  </ng-template>
</ng-container>
