<div class="container mt-3 pb-5">
  <!--  Back button-->
  <div class="d-grid gap-2 col-6 mx-auto">
    <button routerLink="/marshal-guard" class="btn btn-primary" type="button"><i class="bi bi-arrow-left"></i> Back</button>
  </div>

  @if (marshalGuardDetail) {
    <div class="card mt-5">
      <h5 class="card-header text-center">
        <div>{{marshalGuardDetail.eventDate | date: 'dd.MM.yyyy'}}</div>
      </h5>
      <div class="card-body">
        <h5 class="card-title">Level: <span class="text-primary">{{marshalGuardDetail.level}}</span></h5>
        <p class="card-text">Participation rate: <ngb-progressbar class="mb-3" type="success" [value]="marshalGuardDetail.participants" [max]="marshalGuardDetail.allianceSize" [showValue]="true" /></p>
        <p class="card-text">Reward phase: <br><ngb-rating [(rate)]="marshalGuardDetail.rewardPhase" [max]="5" [readonly]="true">
          <ng-template let-fill="fill" let-index="index">
            <i
              class="bi-star{{ fill === 100 ? '-fill' : '' }} custom-rating-icon"
              [class.green]="marshalGuardDetail.rewardPhase === 5"
              [class.yellow]="marshalGuardDetail.rewardPhase === 4"
              [class.red]="marshalGuardDetail.rewardPhase < 4">
            </i>
          </ng-template>
        </ngb-rating>
        </p>
        <hr>
        <div>
          <p class="card-text">Creator: <span class="text-primary">{{marshalGuardDetail.createdBy}}</span></p>
          @if (marshalGuardDetail.modifiedOn) {
            <p class="card-text">Modified: <span class="text-primary">{{marshalGuardDetail.modifiedOn | date: 'dd.MM.yyyy HH:mm'}}</span>
              by <span class="text-primary">{{marshalGuardDetail.modifiedBy}}</span></p>
          }
        </div>
        <hr>
        <p class="card-text text-center">Participants</p>
        <div ngbScrollSpy class="bg-light p-3 rounded-2 mb-3" style="height: 200px">
          <div class="row">
            @for (player of marshalGuardDetail.marshalGuardParticipants; track player.id) {

              @if (player.participated) {
                <div class="col-12 col-md-6">
                  <p><span class="fw-bold text-primary">{{player.playerName}}</span></p>
                </div>
              }
            }
          </div>
        </div>
      </div>
    </div>
  }
</div>

