PlayerManagement/Ui/src/app/pages/zombie-siege/zombie-siege.component.html

<div class="container mt-3 pb-5">
  <h2 class="text-center">Zombie Siege</h2>

  @if (!isCreateZombieSiege) {
    <div class="d-grid gap-2 col-6 mx-auto">
      <button (click)="onCreateEvent()" class="btn btn-primary" type="button">Create new Event</button>
    </div>
  }

  @if (isCreateZombieSiege) {
    <form [formGroup]="zombieSiegeForm">
      <div class="form-floating mb-3 is-invalid">
        <input [ngClass]="{
        'is-invalid': f['eventDate'].invalid && (f['eventDate'].dirty || f['eventDate'].touched),
        'is-valid': f['eventDate'].valid}"
               type="date" class="form-control" id="eventDate" placeholder="eventDate" formControlName="eventDate">
        <label for="level">eventDate</label>
        @if (f['eventDate'].invalid && (f['eventDate'].dirty || f['eventDate'].touched)) {
          <div class="invalid-feedback">
            @if (f['eventDate'].hasError('required')) {
              <p>eventDate is required</p>
            }
          </div>
        }
      </div>
      <div class="form-floating mb-3 is-invalid">
        <input [ngClass]="{
        'is-invalid': f['level'].invalid && (f['level'].dirty || f['level'].touched),
        'is-valid': f['level'].valid}"
               type="number" class="form-control" id="level" placeholder="level" formControlName="level">
        <label for="level">Level</label>
        @if (f['level'].invalid && (f['level'].dirty || f['level'].touched)) {
          <div class="invalid-feedback">
            @if (f['level'].hasError('required')) {
              <p>Level is required</p>
            }
          </div>
        }
      </div>
      <div class="form-floating mb-3 is-invalid">
        <input type="number" class="form-control" id="allianceSize" placeholder="allianceSize" formControlName="allianceSize">
        <label for="level">allianceSize</label>
      </div>

      @if (!playerSelected) {
        <div class="d-flex justify-content-center">
          <p class="text-warning">Please add participants</p>
        </div>
      } @else {
        <div class="d-flex justify-content-center">
          <p><span class="fw-bold text-warning">{{playerParticipated.length}}</span> player(s) selected</p>
        </div>
      }

      <div class="d-grid gap-2 col-6 mx-auto">
        <button (click)="onAddParticipants()" class="btn btn-primary" type="button">{{isUpdate || playerParticipated.length > 0 ? 'Update Participants' : 'Add Participants'}}</button>
      </div>
      <div class="d-flex justify-content-between">
        <button (click)="onCancel()" type="button" class="btn btn-warning">Cancel</button>
        <button [disabled]="zombieSiegeForm.invalid || playerParticipated.length <= 0" (click)="onSubmit()" type="submit" class="btn btn-success">{{isUpdate ? 'Update': 'Create'}}</button>
      </div>
    </form>
  }

  @if(!isCreateZombieSiege) {
    @if (zombieSieges.length > 0) {
      <div class="table-responsive mt-5">
        <table class="table table-striped table-bordered">
          <thead>
          <tr>
            <th scope="col">Event Date</th>
            <th scope="col">Level</th>
            <th scope="col">Alliance Size</th>
            <th scope="col">Survived 20 waves</th>
            <th scope="col">Creator</th>
            <th scope="col">Action</th>
          </tr>
          </thead>
          <tbody>
            @for (zombieSiege of zombieSieges; track zombieSiege.id) {
              <tr class="">
                <td>{{zombieSiege.eventDate | date: 'dd.MM.yyyy'}}</td>
                <td>{{zombieSiege.level}}</td>
                <td>{{zombieSiege.allianceSize}}</td>
                <td>{{zombieSiege.totalLevel20Players}}
                  @if (zombieSiege.totalLevel20Players <= 20) {
                    <i class="ps-3 bi bi-emoji-frown-fill text-danger"></i>
                  } @else {
                    <i class="ps-3 bi bi-emoji-smile-fill text-success"></i>
                  }
                </td>
                <td>{{zombieSiege.createdBy}}</td>
                <td>
                  <div class="d-flex gap-3 justify-content-around">
                    <i ngbTooltip="Show details" placement="auto" (click)="onGoToZombieSiegeDetail(zombieSiege)" class="bi custom-info-icon bi-info-circle-fill"></i>
                    <i ngbTooltip="Edit" placement="auto" (click)="onEditZombieSiege(zombieSiege)" class="bi custom-edit-icon bi-pencil-fill"></i>
                    <i ngbTooltip="Delete" placement="auto" (click)="onDeleteZombieSiege(zombieSiege)" class="bi custom-delete-icon bi-trash3"></i>
                  </div>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    } @else {
      <div class="alert alert-secondary text-center mt-5" role="alert">
        No saved zombie sieges
      </div>
    }
  }

</div>