<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">
      <section class="columnSection">
        <div class="detailsBackButton">
          @if (punishment === undefined) {
            <p>Loading...</p>
          }

          <a [routerLink]="['/bans']">< Back</a>
        </div>
      </section>
      <section class="columnSection center">
        @if (punishment) {
          <div>
            <span class="tag tagInfo"
                  [ngClass]="{
                        'tagPermanent': this.historyFormat.isPermanent(punishment),
                        'tagExpired': !this.historyFormat.isPermanent(punishment)
                      }">
              {{ this.historyFormat.getType(punishment) }}
            </span>
          </div>
          <div>
            <span
              class="tag tagInfo"
              [ngClass]="{
                    'tagActive': this.historyFormat.isActive(punishment),
                    'tagInactive': !this.historyFormat.isActive(punishment)
                  }">
              {{ this.historyFormat.isActive(punishment) ? 'Active' : 'Inactive' }}
            </span>
          </div>
        }
      </section>
      <section class="columnSection">
        <div class="columnContainer">
          <div class="columnParagraph">
            @if (punishment) {
              <div class="playerContainer">
                <h2>Player</h2>
                <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.uuid, '150')"
                  width="150"
                  height="150"
                  alt="{{punishment.username}}'s Minecraft skin"
                  >
                  <h3 class="detailsUsername">{{ punishment.username }}</h3>
                </div>
              }
            </div>
          </div>
          <div class="columnContainer">
            <div class="columnParagraph">
              @if (punishment) {
                <div class="playerContainer">
                  <h2>Moderator</h2>
                  <img class="avatar" [ngSrc]="this.historyFormat.getAvatarUrl(punishment.punishedByUuid, '150')"
                    width="150"
                    height="150"
                    alt="{{punishment.punishedBy}}'s Minecraft skin"
                    >
                    <h3 class="detailsUsername">{{ punishment.punishedBy }}</h3>
                  </div>
                }
              </div>
            </div>
            <div class="columnContainer">
              <div class="columnParagraph">
                @if (punishment) {
                  <div class="detailsInfo">
                    <h2>Reason</h2>
                    <p>{{ punishment.reason | removeTrailingPeriod }}</p>
                  </div>
                }
              </div>
            </div>
            <div class="columnContainer">
              <div class="columnParagraph">
                @if (punishment) {
                  <div class="detailsInfo">
                    <h2>Date</h2>
                    <p>{{ this.historyFormat.getPunishmentTime(punishment) }}</p>
                  </div>
                }
              </div>
            </div>
          </section>
        </section>
      </main>
    </ng-container>


    <section class="columnSection">
      @if (punishment) {
        <span>Expires</span>
        <span>{{ this.historyFormat.getExpiredTime(punishment) }}</span>
        @if (punishment.removedBy !== undefined && punishment.removedBy.length > 0) {
          <span>Un{{ this.historyFormat.getType(punishment).toLocaleLowerCase() }} reason</span>
          <span>{{ punishment.removedReason == null ? 'No reason specified' : punishment.removedReason }}</span>
        }
      }
    </section>
