<div class="loading-spinner" *ngIf="wallet === null">
  <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
</div>
<div *ngIf="wallet !== null">
  <button matTooltip="Recalculate" (click)="setWallet()" mat-fab color="accent" class="mat-fab mat-fab-bottom-right">
    <mat-icon>dialpad</mat-icon>
  </button>
  <mat-card>
        <mat-card-content>
                <h4>Coin Totals</h4>
          <mat-list>
            <mat-list-item *ngFor="let coin of wallet?.coin_totals">
              <h4 mat-line><i [ngClass]="coin.icon"></i> {{coin.coin}}</h4>
              <h4 mat-line>{{coin.balance}}</h4>
            </mat-list-item>
          </mat-list>

          <mat-divider></mat-divider>
          <h4>Offline Coins</h4>
              <mat-list>
                <mat-list-item *ngFor="let coin of wallet?.coins_offline">
                  <h4 mat-line><i [ngClass]="coin.icon"></i> {{coin.coin}}</h4>
                  <h4 mat-line>{{coin.balance}}</h4>
                </mat-list-item>
              </mat-list>
          <mat-divider></mat-divider>
          <h4>Offline Summary</h4>
                <mat-list>
                  <mat-list-item *ngFor="let coin of wallet?.offline_summary.BTC">
                    <i class="cc btc"></i>
                    <h4 mat-line>Address: {{coin.address}}</h4>
                    <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
                  </mat-list-item>
      
                  <mat-list-item *ngFor="let coin of wallet?.offline_summary.LTC">
                    <i class="cc ltc"></i>
                    <h4 mat-line>Address: {{coin.address}}</h4>
                    <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
                  </mat-list-item>
      
                  <mat-list-item *ngFor="let coin of wallet?.offline_summary.ETH">
                    <i class="cc eth"></i>
                    <h4 mat-line>Address: {{coin.address}}</h4>
                    <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
                  </mat-list-item>
                </mat-list>


          <mat-divider></mat-divider>
          <h4>Online Coins</h4>
                <mat-list>
                  <mat-list-item *ngFor="let coin of wallet?.coins_online">
                    <i [ngClass]="coin.icon"></i>
                    <h4 mat-line>{{coin.coin}}</h4>
                    <h4 mat-line>{{coin.balance}}</h4>
                  </mat-list-item>
                </mat-list>
    <mat-divider></mat-divider>
         <h4> Online Summary</h4>
          <mat-list>
            <mat-list-item *ngFor="let coin of wallet?.online_summary.BTC">
              <i class="cc btc"></i>
              <h4 mat-line>Address: {{coin.address}}</h4>
              <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
            </mat-list-item>

            <mat-list-item *ngFor="let coin of wallet?.online_summary.LTC">
              <i class="cc ltc"></i>
              <h4 mat-line>Address: {{coin.address}}</h4>
              <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
            </mat-list-item>

            <mat-list-item *ngFor="let coin of wallet?.online_summary.ETH">
              <i class="cc eth"></i>
              <h4 mat-line>Address: {{coin.address}}</h4>
              <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
            </mat-list-item>
          </mat-list>
   
   
   
      </mat-card-content>
    </mat-card>
</div>
