<mat-toolbar color="primary">
  <span>Ledger Cloud Dashboard</span>
</mat-toolbar>
<div class="lcd-container">
  <div *ngIf="!authenticated">
    <mat-card class="lcd-card">
      <mat-card-content>
        <h1>Authentication required</h1>
        <p>Please authenticate in order to use the dashboard.</p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="accent" (click)="login()">Login</button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div *ngIf="deleteInProgress">
    <mat-card class="lcd-card">
      <mat-card-content>
        <h1>Delete in progress</h1>
        <p>Please don't close the tab!!!</p>
        <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
        <p>Deleted documents: <b>{{ deletedDocumentCount }} </b></p>
      </mat-card-content>
    </mat-card>
  </div>

  <div *ngIf="authenticated && !deleteInProgress">
    <!-- Info about the user -->
    <mat-card class="lcd-card">
      <mat-card-content>
        <h1>User</h1>
        <p>You are signed in as <b>{{ (user | async)?.email }}</b>
          a.k.a <b>{{ uid }}</b> (Firebase user ID).</p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="accent" (click)="logout()">Logout</button>
      </mat-card-actions>
    </mat-card>

    <!-- State -->
    <mat-card class="lcd-card">
      <mat-card-content>
        <h1>State</h1>
        <div *ngIf="loading">
          <p>Loading the state.</p>
        </div>
        <div *ngIf="!loading && !version">
          <p>Ledger is empty.</p>
        </div>
        <div *ngIf="!loading && version">
          <p>Looking at serialization version <b>{{ version }}</b>.</p>
          <p>There are <b>{{ (devices | async)?.length }}</b> devices syncing.</p>
          <ul>
            <li class="text" *ngFor="let device of devices | async">
              {{device.id}}
              <span *ngIf="device.connectionTimestamp">
                -- Last connection at
                {{device.connectionTimestamp | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
            </li>
          </ul>
          <p>Device IDs are opaque and meaningful only to Ledger.</p>
        </div>
      </mat-card-content>
    </mat-card>

    <!-- Cloud delete -->
    <mat-card class="lcd-card">
      <mat-card-content>
        <h1>Reset Ledger state</h1>
        <p><i>Why do we even have this lever?</i></p>
        <p><b>This will also trigger erase of the local data, the next time each of
            the devices sync</b></p>
        <p>Collections to be erased:</p>
        <ul *ngFor="let collection of allCollections">
          <li>{{ collection.ref.path }}</li>
        </ul>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="warn" (click)="erase()">Permanently erase all my data</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>