<div class="card  rounded m-3 animate__animated" [ngClass]="{ 'small': small, 'shadow': shadow, 'transparent': transparent, 'banned': banned, 'animate__flipInY': small }">
  <figure class="p-1" *ngIf="participant">
    <img [src]="getImageUrl()" class="participant-photo img-fluid">
  </figure>
  <div class="card-title">
    {{ participant.name }}
  </div>
  <div class="content" *ngIf="!small">
    <div class="card-subtitle">
      <h3 class="animate__zoomInDown animate__animated title" [ngClass]="{'animate__zoomInDown animate__animated big': addAnimatedClass }">{{ participant.score || 0 }} {{ banned ? '/' + bannedRemaining : '' }} </h3>
    </div>
    <div class="card-text">
      <img *ngFor="let card of cards" [src]="'/assets/cards/' + card.cardType + '.png'" class="card-icon" alt="">
    </div>
  </div>
  <div *ngIf="small && showScoreOnSmall" class="content">
    <div class="card-subtitle">
      <h3 class="animate__zoomInDown animate__animated title" [ngClass]="{'animate__zoomInDown animate__animated big': addAnimatedClass }">{{ participant.score || 0 }}</h3>
    </div>
  </div>
</div>
