AltitudeWeb/frontend/src/app/bans/bans.component.html

<ng-container>
  <app-header [current_page]="'bans'" height="200px" background_image="/public/img/backgrounds/staff.png"
              [overlay_gradient]="0.5">>
    <div class="title" header-content>
      <h1>Minecraft Punishments</h1>
    </div>
  </app-header>

  <main>
    <section class="darkmodeSection">
      <div class="container">
        <div class="columnSection">
          <div class="historyButtonContainer">
            <div [id]="getCurrentButtonId('all')" class="button-outer" (click)="changeHistoryPunishment('all')">
              <span class="button-inner"
                    [ngClass]="active">All</span>
            </div>
            <div [id]="getCurrentButtonId('ban')" class="button-outer" (click)="changeHistoryPunishment('ban')">
              <span class="button-inner"
                    [ngClass]="active">Bans</span>
            </div>
            <div [id]="getCurrentButtonId('mute')" class="button-outer" (click)="changeHistoryPunishment('mute')">
              <span class="button-inner"
                    [ngClass]="active">Mutes</span>
            </div>
            <div [id]="getCurrentButtonId('warn')" class="button-outer" (click)="changeHistoryPunishment('warn')">
              <span class="button-inner"
                    [ngClass]="active">Warnings</span>
            </div>
            <div [id]="getCurrentUserTypeButtonId('player')" class="button-outer" (click)="changeUserType('player')"
                 style="margin-left: 120px;">
              <span class="button-inner"
                    [ngClass]="active">Player</span>
            </div>
            <div [id]="getCurrentUserTypeButtonId('staff')" class="button-outer" (click)="changeUserType('staff')">
              <span class="button-inner"
                    [ngClass]="active">Staff</span>
            </div>
          </div>
          <div class="historySearchContainer">
            <input class="historySearch"
                   type="search"
                   placeholder="Search.."
                   [(ngModel)]="searchTerm"
                   (input)="filterNames()"
                   (keyup.enter)="search()"
            >
            <div class="dropdown-results" *ngIf="filteredNames.length > 0 && searchTerm">
              <div
                class="dropdown-item"
                *ngFor="let name of filteredNames"
                (mousedown)="selectName(name)">
                {{ name }}
              </div>
            </div>
          </div>
        </div>
        <div class="historyTable">
          <app-history [userType]="userType" [punishmentType]="punishmentType"
                       [page]="page" [searchTerm]="finalSearchTerm" (pageChange)="updatePageSize($event)"
                       (selectItem)="setSearch($event)">
          </app-history>
        </div>
        <div class="changePageButtons">
          <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
                  [disabled]="!buttonActive(0)"
                  (click)="setPage(0)" class="historyPageButton">
            First page
          </button>
          <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
                  [disabled]="!buttonActive(0)"
                  (click)="previousPage()" class="historyPageButton">
            Previous page
          </button>
          <span class="pageNumber">{{ this.page }} / {{ getMaxPage() }}</span>
          <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
                  [disabled]="!buttonActive(getMaxPage())"
                  (click)="nextPage()" class="historyPageButton">
            Next page
          </button>
          <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
                  [disabled]="!buttonActive(getMaxPage())"
                  (click)="setPage(getMaxPage())" class="historyPageButton">
            Last page
          </button>
        </div>
      </div>
    </section>
  </main>
</ng-container>