<mat-accordion>
  <mat-expansion-panel expanded="true">
    <mat-expansion-panel-header>
      <mat-panel-title color="warn">Pending trees</mat-panel-title>
      <mat-panel-description>Sync trees created locally, not saved on the server</mat-panel-description>
    </mat-expansion-panel-header>
    <div class="pendingTrees">
      Trees pending for syncing to server's database:
      {{ pendingTreesCount }}.
      <div class="actions" *ngIf="pendingTreesCount > 0">
      <button mat-raised-button color="primary" (click)="dataService.syncPendingTrees(true)">
        Sync now
      </button>
      <button mat-raised-button color="warn" (click)="dataService.deletePendingTrees()">
        Delete
      </button>
      </div>
    </div>
  </mat-expansion-panel>

  <mat-expansion-panel expanded="false">
    <mat-expansion-panel-header>
      <mat-panel-title color="warn">Update server data</mat-panel-title>
      <mat-panel-description>Get updates from plantekey, etc</mat-panel-description>
    </mat-expansion-panel-header>
    <div class="actions">
      <button mat-raised-button (click)="updatePlantekeyData()" color='primary'>
        Update Plantekey data
      </button>
      <button mat-raised-button (click)="updatePlantekeyImages()" color='primary'>
        Update Plantekey images
      </button>
      <button mat-raised-button (click)="makeAttachmentsTarFile()" color='primary'>
        Make attachments tarfile
      </button>
    </div>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>User</mat-panel-title>
      <mat-panel-description>Show logged-in user information</mat-panel-description>
    </mat-expansion-panel-header>
    <div *ngIf="(configService.conf | async).bootstrap?.user; else noUser">
      <p><span class='h'>User: </span>{{ (configService.conf | async).bootstrap.user.username }}</p>
      <p><span class='h'>Full name: </span>{{ (configService.conf | async).bootstrap.user.full_name }}</p>
      <p><span class='h'>Email: </span>{{ (configService.conf | async).bootstrap.user.email }}</p>
      <p><span class='h'>Roles: </span>
        <mat-chip *ngFor='let role of (configService.conf | async).bootstrap.user.roles'>
          {{ role.name }}
        </mat-chip>
      </p>
    </div>
  </mat-expansion-panel>
</mat-accordion>

<ng-template #noUser>
  {{ (configService.conf | async).bootstrap.user.username }}, your session has expired.
  <button mat-raised-button color="primary" [routerLink]="['/', 'login']">
    login
    <mat-icon>login</mat-icon>
  </button>
</ng-template>