<div *ngIf="user" class="free-token-place-panel">
  <div class="content">
    <ul *ngIf="balance" class="free-token-place-panel__balance">
      <li>
        <button *ngIf="showReceiveTokensButton" class="material-btn receive-tokens" (click)="receiveTokensAsync()">
          {{ 'FreeTokenPlace.GetTokens' | translate }}
        </button>
      </li>
      <li class="balance-label">{{ 'FreeTokenPlace.Balance' | translate }}</li>
      <li>{{ userBalance.ethBalance | formatNumber: 3: 18  }} {{ 'FreeTokenPlace.ETH' | translate }}</li>
      <li>{{ userBalance.actualSVTbalance | formatNumber: 3: userBalance.svtDecimals }} {{ 'FreeTokenPlace.SVT' | translate }}</li>
      <li *ngIf="userBalance.totalFrozenSVT > 0">
        {{ userBalance.totalFrozenSVT | formatNumber: 3: userBalance.svtDecimals }} {{ 'FreeTokenPlace.FreezedSVT' | translate }}
        <span class="question-icon" (mouseenter)="showFrozenTooltip = true" (mouseleave)="showFrozenTooltip = false">?</span>
        <div *ngIf="showFrozenTooltip" class="frozen-balance-info-tooltip">
          <span class="tooltip-title">{{ 'FreeTokenPlace.CantTransferFreezed' | translate }}</span>
          <ul class="frozen-balance-items">
            <li *ngFor="let frozen of userBalance.frozenSVT">
              {{ frozen.sum | formatNumber: 3: userBalance.svtDecimals }} {{ 'FreeTokenPlace.SVT' | translate }} {{ 'FreeTokenPlace.Until' | translate }} {{ frozen.date | date:'dd.MM.yyyy' }}
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

<div class="content">
  <h1 class="title">{{ 'FreeTokenPlace.Title' | translate }}</h1>
  <h2 *ngIf="!activeEvents.length && !finishedEvents.length && isAllotmentEventsLoaded">
    {{ 'FreeTokenPlace.ComingSoon' | translate }}
  </h2>
  <h2 *ngIf="activeEvents.length">{{ 'FreeTokenPlace.ActiveAllotmentEvents' | translate }}</h2>
  <div class="allotment-events">
    <app-allotment-event-card (finishEvent)="finishEvent($event)" *ngFor="let event of activeEvents" [model]="event">
    </app-allotment-event-card>
  </div>
  <h2 *ngIf="finishedEvents.length">{{ 'FreeTokenPlace.FinishedAllotmentEvents' | translate }}</h2>
  <div class="allotment-events">
    <app-allotment-event-card *ngFor="let event of finishedEvents" [finished]="true"
                              [model]="event">
    </app-allotment-event-card>
  </div>
</div>
