<div class="wallet">
  <div class="wallet__left">
    <div class="wallet__composition composition">
      <div class="composition__header">Wallet</div>
      <div class="composition__content">
        <div class="composition__chart">
          <span class="composition__chart-total">{{ xftAmount$ | ngrxPush }} XFT</span>
          <p-chart type="doughnut"
                   [data]="chartData$ | ngrxPush"
                   [options]="chartOptions"
                   [style]="{'width': '100%'}">
          </p-chart>
        </div>
        <div class="composition__data">
          <p-table [value]="balances$ | ngrxPush"
                   class="composition__table"
                   dataKey="id">
            <ng-template pTemplate="header">
              <tr>
                <th></th>
                <th>Token</th>
                <th>Amount</th>
                <th>Value</th>
                <th>Comm. Amount</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-token>
              <tr>
                <td><span [style.background-color]="token.color"></span></td>
                <td>
                  <div class="token-icon"><img [src]="token.icon" alt=""></div>
                </td>
                <td>{{ token.asset.amount | normalizeBN }}</td>
                <td>${{ token.asset.USD | normalizeBN }}</td>
                <td>
                  <div>
                    <span>{{ token.commitments.length }}</span>
                    <span (click)="onViewCommitmentsClick(token)" class="view">View</span>
                  </div>
                </td>
              </tr>
            </ng-template>
          </p-table>
        </div>
      </div>
    </div>
  </div>

  <div class="wallet__right">
    <div class="commitments">
      <div class="commitments__header">
        <ng-container *ngIf="currentBalance?.icon">
          <img [src]="currentBalance.icon" alt="">
        </ng-container>
        <span>Commitments</span>
      </div>

      <div class="commitments__wrapper">
        <ng-template #emptyView>
          <div class="commitments__empty">
            Select asset to explore commitments
          </div>
        </ng-template>

        <ng-container *ngIf="currentBalance?.commitments?.length else emptyView">
          <ngx-simplebar [options]="{ autoHide: false }"
                         class="commitments__simplebar">
            <p-table [value]="currentBalance?.commitments"
                     [(selection)]="selectedCommitments"
                     class="commitments__table"
                     dataKey="id">
              <ng-template pTemplate="header">
                <tr>
                  <th>
                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                  </th>
                  <th>
                    <div>
                      <span>Commitment #</span>
                      <div class="commitments__zero-balances">
                        <span>Token amount</span>
                        <span class="pi pi-sort-down"></span>
                        <!--<span class="pi pi-sort-up"></span>-->
                      </div>
                    </div>
                  </th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-commitment>
                <tr>
                  <td>
                    <p-tableCheckbox [value]="commitment"></p-tableCheckbox>
                  </td>
                  <td>
                    <div>
                      <div class="commitments__text">{{ commitment.id }}</div>

                      <div class="commitments__balance">
                        <ng-container [ngTemplateOutlet]="tokenRef"
                                      [ngTemplateOutletContext]="{item: commitment}">
                        </ng-container>

                        <span class="commitments__balance-usd">${{ commitment.USD | normalizeBN }}</span>
                      </div>
                    </div>
                  </td>
                </tr>
              </ng-template>
            </p-table>
          </ngx-simplebar>

          <div class="commitments__footer">
            <div class="commitments__text">Selected Commitments Balance:</div>
            <div class="commitments__balance">
              <ng-container [ngTemplateOutlet]="tokenRef"
                            [ngTemplateOutletContext]="{item: { amount: sumToken }}">
              </ng-container>

              <span class="commitments__balance-usd">${{ sumUSD | normalizeBN }}</span>
            </div>
          </div>

          <button (click)="onGoToShiftClick()"
                  [disabled]="!selectedCommitments?.length || isLoading"
                  [loading]="isLoading"
                  pButton
                  type="button"
                  label="Go to Shift"
                  class="commitments__button">
          </button>
        </ng-container>
      </div>
    </div>

    <ng-template #tokenRef let-item="item">
      <div class="token">
        <div class="token__icon">
          <img [src]="currentBalance.icon" alt="">
        </div>
        <span class="token__amount">{{ item.amount | normalizeBN }}</span>
      </div>
    </ng-template>

  </div>
</div>