<div fxFlex="100" fxLayout="row" fxLayoutAlign="stretch start" fxLayoutGap="0.5em">
  <div fxFlex="25" fxLayout="column" fxLayoutGap="0.5em">
    <mat-toolbar>
      <mat-toolbar-row>
        <mat-icon>account_circle</mat-icon>&nbsp;Аккаунт
      </mat-toolbar-row>
    </mat-toolbar>
    <mat-card>
      <mat-card-header>
        <div class="account-header-avatar" mat-card-avatar></div>
        <mat-card-title>
          <label-id default="Аккаунт" id="account-name"></label-id>
        </mat-card-title>
        <mat-card-subtitle>Пульт управления свободными деньгами!</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>Целью ввода Свободных Денег является разрушение нечестных привилегии нынешних
          денег. Эта нечестность целиком и полностью заключается в том, что наша традиционная
          форма денег имеет одно неоспоримое и всегдашнее преимущество перед товарами, т. е.
          то, что деньги "вечны". </p>
      </mat-card-content>
      <mat-card-actions>
        <button (click)="iNeedMoney()" mat-button>ДАЙ ДЕНЕГ!</button>
      </mat-card-actions>
    </mat-card>
    <mat-toolbar>
      <mat-toolbar-row>
        <mat-icon>credit_card</mat-icon>&nbsp;Счета
      </mat-toolbar-row>
    </mat-toolbar>
    <mat-list *ngxInit="{} as hovered">
      <mat-list-item>
        <mat-icon mat-list-icon>toll</mat-icon>
        <div fxLayout="row" fxLayoutAlign="space-between center" mat-line><span>Всего монет</span><span>{{getTotatOverall()}}<span>₣</span></span></div>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item (mouseenter)="hovered[idx] = true" (mouseleave)="hovered[idx] = false" *ngFor="let account of accounts; let idx=index">
        <mat-icon mat-list-icon>toll</mat-icon>
        <div fxLayout="row" fxLayoutAlign="space-between center" mat-line>
          <span><label-id [id]="account.id" default="Счёт"></label-id></span>
          <div fxLayout="row" fxLayoutAlign="start center">
            <button (click)="showDebitDialog(account)" [disabled]="!hovered[idx]" class="mat-elevation-z0" color="warn" mat-button matTooltip="ПОПОЛНИТЬ">
              <mat-icon>archive</mat-icon>
            </button>
            <button (click)="showCreditDialog(account)" [disabled]="!hovered[idx]" class="mat-elevation-z0" color="primary" mat-button matTooltip="ОПЛАТИТЬ">
              <mat-icon>unarchive</mat-icon>
            </button>
          </div>
        </div>
        <div mat-line>Баланс: <span>{{account.overall}}<span>₣</span></span></div>
      </mat-list-item>
      <mat-list-item>
        <button (click)="addAccount()" mat-button>ОТКРЫТЬ СЧЁТ</button>
      </mat-list-item>
    </mat-list>
  </div>
  <div fxFlex="50" fxLayout="column" fxLayoutGap="0.5em">
    <mat-toolbar>
      <mat-toolbar-row>
        <mat-icon>account_balance_wallet</mat-icon>&nbsp;Операции
      </mat-toolbar-row>
    </mat-toolbar>
    <mat-list>
      <mat-list-item *ngFor="let ev of events; let idx = index" [ngStyle]="{'background-color': idx % 2 === 1 ? 'rgba(240, 240, 240, 0.5)' : 'rgba(0, 0, 0, 0)'}">
        <mat-icon *ngIf="ev.type == 'ExchangeSuccessEvent' && ev.info.direction == 'to'" mat-list-icon>archive</mat-icon>
        <mat-icon *ngIf="ev.type == 'ExchangeSuccessEvent' && ev.info.direction == 'from'" mat-list-icon>unarchive</mat-icon>
        <mat-icon *ngIf="ev.type == 'ExchangeFailedEvent'" mat-list-icon>error</mat-icon>
        <div fxLayout="row" fxLayoutAlign="space-between center" mat-line>
          <span>
            <span *ngIf="ev.info.direction == 'to'">Пополнение</span>
            <span *ngIf="ev.info.direction == 'from'">Списание</span>
            <span *ngIf="ev.type == 'ExchangeFailedEvent'"> (ошибка)</span>
          </span>
          <span [ngStyle]="{'color': (ev.info.direction == 'from') ? 'red' : ev.info.direction == 'to' ? 'green' : 'black'}"><span *ngIf="ev.info.direction == 'to'">+</span><span *ngIf="ev.info.direction == 'from'">-</span><span>{{ev.info.amount}}</span><span>₣</span></span>
        </div>
        <div mat-line>
          <span>операция</span>
          <span> от {{ev.date | date : 'medium'}}</span>
        </div>
      </mat-list-item>
    </mat-list>
  </div>
  <div fxFlex="25" fxLayout="column" fxLayoutGap="0.5em">
    <mat-toolbar>
      <mat-toolbar-row>
        <mat-icon>cast</mat-icon>&nbsp;Разное
      </mat-toolbar-row>
    </mat-toolbar>
    <mat-list>
      <mat-list-item *ngIf="demurrage">
        <mat-icon mat-list-icon>bubble_chart</mat-icon>
        <div mat-line>Пересчёт монет</div>
        <div mat-line>Намечен на {{demurrage.date | date : 'medium'}}</div>
        <div mat-line>
          <mat-progress-bar [bufferValue]="demurrage.getValue()" [value]="demurrage.getValue()" color="warn" mode="buffer"></mat-progress-bar>
        </div>
      </mat-list-item>
    </mat-list>
    <mat-toolbar>
      <mat-toolbar-row>
        <mat-icon>apartment</mat-icon>&nbsp;Организации
      </mat-toolbar-row>
    </mat-toolbar>
    <mat-list>
      <mat-list-item *ngFor="let org of orgs" [routerLink]="['/privotal', {privateId: org.privateId}]" class="href">
        <mat-icon mat-list-icon>business</mat-icon>
        <div mat-line>
          <label-id [id]="org.privateId" [labelOnly]="true" default="Организация"></label-id>
        </div>
        <div mat-line>
          <span *ngIf="org.position == 'owner'">вы владелец</span>
          <span *ngIf="org.position == 'coowner'">вы совладелец</span>
          <span *ngIf="org.position == 'unit'">вы сотрудник</span>
        </div>
      </mat-list-item>
      <mat-list-item>
        <button (click)="addPrivate()" mat-button>СОЗДАТЬ ОРГАНИЗАЦИЮ</button>
        <button (click)="joinPrivate()" mat-button>ПРИСОЕДИНИТЬСЯ</button>
      </mat-list-item>
    </mat-list>
  </div>
</div>
