<div *ngIf="model.project" class="event-card">
  <div class="event-card__title">{{model.event.name}}</div>
  <div class="event-card__top-info">
    <div class="project-avatar">
      <img src="{{ imageUrl() }}" alt="">
      <span class="scoring">
        <span *ngIf="model.project.scoring">{{( model.project.scoring.score | roundNumberPipe ) | dashIfEmpty }}</span>
        <span *ngIf="!model.project.scoring">&mdash;</span>
        <span class="light-color ">/ 100</span></span>
    </div>
    <div class="project-info">
      <div class="project-title"><a [routerLink]="getProjectLink(model.event.projectId)">{{ model.project.name }}</a></div>
      <div class="project-distribute">
        <span class="light-label">{{ 'FreeTokenPlace.TokensToDistribute' | translate }}</span>
        <div class="tokens-label">{{ model.event.totalTokens| formatNumber:  0: model.event.tokenDecimals }} {{ model.event.tokenTicker }}</div>
      </div>
      <div class="project-bets">
        <span class="light-label">{{ 'FreeTokenPlace.TotalBet' | translate }}</span>
        <div class="tokens-label">{{ userBid | formatNumber:  3: model.balance.svtDecimals }} / {{ model.event.totalBid | formatNumber: 3: model.balance.svtDecimals }} SVT</div>
      </div>
    </div>
  </div>
  <div class="event-card__timer">
    <span *ngIf="userBid.isZero()" class="light-label light-label_small">{{ 'FreeTokenPlace.MyPotentialShare' | translate }}</span>
    <div *ngIf="userBid.isZero()">{{ potentialShare | formatNumber:  0: model.event.tokenDecimals }} {{ model.event.tokenTicker }} ( {{ potentialPercentShare | formatNumber }} %)</div>
    <span *ngIf="userBid.greaterThan(0)" class="light-label light-label_small">{{ 'FreeTokenPlace.ActualShare' | translate }}</span>
    <div *ngIf="userBid.greaterThan(0)">{{ actualShare | formatNumber: 0: model.event.tokenDecimals }} {{ model.event.tokenTicker }} ({{ percentShare | formatNumber }}%)</div>
    <div class="timer" [class.timer_finished]="finished">
      <div class="timer__info" *ngIf="!finished">{{ 'FreeTokenPlace.TheEventEndsIn' | translate }}</div>
      <div class="timer__info" *ngIf="finished">{{ 'FreeTokenPlace.TheEventWasEnd' | translate }}</div>
      <div *ngIf="finished" class="timer__numbers">
        <div class="time-number time-number__finished">
          {{ model.event.finishDate | date: 'dd.MM.yy' }}
        </div>
      </div>
      <div *ngIf="!finished" class="timer__numbers">
        <div *ngIf="model.timer.days > 0" class="time-number">
          {{ model.timer.days }}
          <div class="timer__labels">{{ 'FreeTokenPlace.Days' | translate }}</div>
        </div>
        <div *ngIf="model.timer.days > 0 || model.timer.hours > 0" class="time-number">
          {{ model.timer.hours }}
          <div class="timer__labels">{{ 'FreeTokenPlace.Hours' | translate }}</div>
        </div>
        <div *ngIf="model.timer.days == 0" class="time-number">
          {{ model.timer.minutes }}
          <div class="timer__labels">{{ 'FreeTokenPlace.Minutes' | translate }}</div>
        </div>
        <div *ngIf="model.timer.days == 0 && model.timer.hours == 0" class="time-number">
          {{ model.timer.seconds }}
          <div class="timer__labels">{{ 'FreeTokenPlace.Seconds' | translate }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="event-card__footer">
    <span *ngIf="model.transaction !== ''" class="light-label light-label_small">
      <a class="awaiting-link" target="_blank" href="https://rinkeby.etherscan.io/tx/{{ model.transaction }}">{{ 'FreeTokenPlace.Awaiting' | translate }}</a>
    </span>
    <div *ngIf="!finished && model.transaction == ''" class="start-btn-wrapper">
      <button *ngIf="!userHasBid" (click)="showParticipateDialogAsync()" class="material-btn">{{ 'FreeTokenPlace.Participate' | translate }}</button>
      <button *ngIf="userHasBid" (click)="showParticipateDialogAsync()" class="material-btn material-btn__action">{{ 'FreeTokenPlace.AddSVT' | translate }}</button>
    </div>
    <div *ngIf="canReceiveTokens && model.transaction == ''" class="start-btn-wrapper">
      <button (click)="showReceiveTokensModalAsync()" class="material-btn">{{ 'FreeTokenPlace.Receive' | translate }} {{model.event.tokenTicker}}</button>
    </div>
  </div>
</div>
