@if (history.length === 0) {
  <p>No history found</p>
}

@if (history.length > 0) {
  <table [cellSpacing]="0">
    <div class="historyTableHead">
      <thead>
      <tr>
        <th class="historyType">Type</th>
        <th class="historyPlayer">Player</th>
        <th class="historyPlayer">Banned By</th>
        <th class="historyReason">Reason</th>
        <th class="historyDate">Date</th>
        <th class="historyDate">Expires</th>
        @if (canEdit()) {
          <th class="historyActions"></th>
        }
      </tr>
      </thead>
    </div>
    <div>
      <tbody>
        @for (entry of history; track entry) {
          <tr class="historyPlayerRow">
            <td class="historyType" (click)="showDetailedPunishment(entry)">
              {{ this.historyFormat.getType(entry) }}
            </td>
            <td class="historyPlayer" (click)="setSearch(entry.username, 'player')">
              <div class="playerContainer">
                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(entry.uuid)" width="25" height="25"
                     alt="{{entry.username}}'s Minecraft skin">
                <span class="username">{{ entry.username }}</span>
              </div>
            </td>
            <td class="historyPlayer" (click)="setSearch(entry.punishedBy, 'staff')">
              <div class="playerContainer">
                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(entry.punishedByUuid)" width="25"
                     height="25"
                     alt="{{entry.punishedBy}}'s Minecraft skin">
                <span>{{ entry.punishedBy }}</span>
              </div>
            </td>
            <td class="historyReason" (click)="showDetailedPunishment(entry)">
              {{ entry.reason | removeTrailingPeriod }}
            </td>
            <td class="historyDate" (click)="showDetailedPunishment(entry)">
              {{ this.historyFormat.getPunishmentTime(entry) }}
            </td>
            <td class="historyDate" (click)="showDetailedPunishment(entry)">
              {{ this.historyFormat.getExpiredTime(entry) }}
            </td>
            @if (canEdit()) {
              <td class="historyActions" (click)="openEdit(entry)">
                <mat-icon>edit</mat-icon>
              </td>
            }
          </tr>
        }
      </tbody>
    </div>
  </table>
}