<div class="empty-contracts" *ngIf="!variablesService.currentWallet.contracts.length">
  <span>{{ 'CONTRACTS.EMPTY' | translate }}</span>
</div>

<div class="wrap-table scrolled-content" *ngIf="variablesService.currentWallet.contracts.length">

  <table class="contracts-table">
    <thead>
    <tr>
      <th>{{ 'CONTRACTS.CONTRACTS' | translate }}</th>
      <th>{{ 'CONTRACTS.DATE' | translate }}</th>
      <th>{{ 'CONTRACTS.AMOUNT' | translate }}</th>
      <th>{{ 'CONTRACTS.STATUS' | translate }}</th>
      <th>{{ 'CONTRACTS.COMMENTS' | translate }}</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of sortedArrayContracts" [routerLink]="'/wallet/' + walletId + '/purchase/' + item.contract_id">
      <td>
        <div class="contract">
          <i class="icon alert" *ngIf="!item.is_new"></i>
          <i class="icon new" *ngIf="item.is_new"></i>
          <i class="icon" [class.purchase]="item.is_a" [class.sell]="!item.is_a"></i>
          <span tooltip="{{ item.private_detailes.t }}" placement="top-left" tooltipClass="table-tooltip" [delay]="500" [showWhenNoOverflow]="false">{{item.private_detailes.t}}</span>
        </div>
      </td>
      <td>
        <div>{{item.timestamp * 1000 | date : 'dd-MM-yyyy HH:mm'}}</div>
      </td>
      <td>
        <div>{{item.private_detailes.to_pay | intToMoney}} {{variablesService.defaultCurrency}}</div>
      </td>
      <td>
        <div class="status" [class.error-text]="item.state === 4" tooltip="{{item.state | contractStatusMessages : item.is_a}}" placement="top" tooltipClass="table-tooltip" [delay]="500">
          {{item.state | contractStatusMessages : item.is_a}}
        </div>
      </td>
      <td>
        <div class="comment" tooltip="{{ item.private_detailes.c }}" placement="top-right" tooltipClass="table-tooltip" [delay]="500" [showWhenNoOverflow]="false">
          {{item.private_detailes.c}}
        </div>
      </td>
    </tr>
    </tbody>
  </table>

</div>

<div class="contracts-buttons">
  <button type="button" class="blue-button" [routerLink]="'/wallet/' + walletId + '/purchase'">{{ 'CONTRACTS.PURCHASE_BUTTON' | translate }}</button>
  <button type="button" class="blue-button" disabled>{{ 'CONTRACTS.LISTING_BUTTON' | translate }}</button>
</div>
