<div class="allotment-events">
  <ul class="statuses">
    <li>{{ 'AdminAllotmentEvents.Status' | translate }}</li>
    <li>
      <span class="color-mark color-mark__created"></span>
      {{ 'AdminAllotmentEvents.Created' | translate }}
      <p-checkbox class="box-checkbox"
                  (onChange)="sortByStatusAsync($event, AllotmentEventStatus.Created)"></p-checkbox>
    </li>
    <li>
      <span class="color-mark color-mark__published"></span>
      {{ 'AdminAllotmentEvents.Published' | translate }}
      <p-checkbox class="box-checkbox"
                  (onChange)="sortByStatusAsync($event, AllotmentEventStatus.Published)"></p-checkbox>
    </li>
    <li>
      <span class="color-mark color-mark__in-progress"></span>
      {{ 'AdminAllotmentEvents.InProgress' | translate }}
      <p-checkbox class="box-checkbox"
                  (onChange)="sortByStatusAsync($event, AllotmentEventStatus.InProgress)"></p-checkbox>
    </li>
    <li>
      <span class="color-mark color-mark__in-finished"></span>
      {{ 'AdminAllotmentEvents.Finished' | translate }}
      <p-checkbox class="box-checkbox"
                  (onChange)="sortByStatusAsync($event, AllotmentEventStatus.Finished)"></p-checkbox>
    </li>
  </ul>
  <button (click)="showNewAllotmentEventModalAsync()" class="material-btn">{{
    'AdminAllotmentEvents.AddNewAllotmentEvent' | translate }}
  </button>
  <div class="event-actions">
    <button (click)="showFreezeTimeModalAsync()" class="freeze-icon"></button>
    <button (click)="showReturnAddressModalAsync()" class="return-address-icon"></button>
  </div>
  <p-table class="admin-table" [value]="allotmentEvents"
           [first]="offset"
           [lazy]="true" (onLazyLoad)="getAllotmentEventsAsync($event)" [paginator]="true"
           [rows]="10" [totalRecords]="totalRecords" [loading]="loading">
    <ng-template pTemplate="header" let-columns>
      <tr class="list-row list-row__header">
        <th width="70px" class="list-item">{{ 'AdminAllotmentEvents.ID' | translate }}</th>
        <th width="78px" class="list-item">{{ 'AdminAllotmentEvents.ProjectId' | translate }}</th>
        <th class="list-item">{{ 'AdminAllotmentEvents.AllotmentEvent' | translate }}</th>
        <th class="list-item">{{ 'AdminAllotmentEvents.TokenContractAddress' | translate }}</th>
        <th class="list-item">{{ 'AdminAllotmentEvents.EventContractAddress' | translate }}</th>
        <th class="list-item">{{ 'AdminAllotmentEvents.EventStartDate' | translate }}</th>
        <th class="list-item">{{ 'AdminAllotmentEvents.EventFinishDate' | translate }}</th>
        <th class="list-item">{{ 'AdminAllotmentEvents.TotalTokens' | translate }}</th>
        <th class="list-item">{{ 'AdminAllotmentEvents.Actions' | translate }}</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr class="list-row" [class]="'status-' + rowData['status']">
        <td class="list-item">{{ rowData['id'] }}</td>
        <td class="list-item"><a class="link" [routerLink]="getProjectLink(rowData['projectId'])">{{rowData['projectId']}}</a>
        </td>
        <td class="list-item">{{ rowData['name'] }}</td>
        <td class="list-item">{{ rowData['tokenContractAddress'] | dashIfEmpty }}</td>
        <td class="list-item">{{ rowData['eventContractAddress'] | dashIfEmpty }}</td>
        <td class="list-item">{{ rowData['startDate'] | date: 'dd.MM.yy HH:mm' | dashIfEmpty }}</td>
        <td class="list-item">{{ rowData['finishDate'] | date: 'dd.MM.yy HH:mm' | dashIfEmpty }}</td>
        <td class="list-item"> {{rowData['totalTokens'] | formatNumber:  0: rowData['tokenDecimals']  }} {{ rowData['tokenTicker'] }}</td>
        <td *ngIf="!getTransaction(rowData['id'])" class="list-item">
          <button class="btn-icon" *ngIf="rowData.status === AllotmentEventStatus.Created"
                  (click)="publishAsync(rowData)">
            <i class="material-icons">publish</i>
          </button>
          <button class="btn-icon" *ngIf="rowData.status === AllotmentEventStatus.Published"
                  (click)="showStartAllotmentEventModal(rowData)">
            <i class="material-icons">play_arrow</i>
          </button>
          <button class="btn-icon" *ngIf="rowData.status !== AllotmentEventStatus.Finished && rowData.status !== AllotmentEventStatus.Created"
                  (click)="showEditAllotmentModal(rowData)">
            <i class="material-icons">create</i>
          </button>
          <button class="btn-icon" *ngIf="rowData.status !== AllotmentEventStatus.Finished && rowData.status !== AllotmentEventStatus.Created"
                  (click)="showDeleteAllotmentModalAsync(rowData)">
            <i class="material-icons">clear</i>
          </button>
          <span *ngIf="rowData.status === AllotmentEventStatus.Finished">{{ 'AdminAllotmentEvents.Finished' | translate }}</span>
        </td>
        <td *ngIf="getTransaction(rowData['id'])" class="list-item">
          <a target="_blank" href="{{ getEtherscanLink(rowData['id']) }}">{{ 'AdminAllotmentEvents.Awaiting' | translate }}</a>
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>
