<div *ngIf="trail" class="container">
  <h1 class="title">
    Trail: <span class='name'>{{ trail.name }}</span>
  </h1>
  <div class="content">
    <div class="photo">
      <img class='photo' src="{{ trail.getPhotoUrl() }}">
    </div>
    <dl>
      <dt>Length</dt>
      <dd>{{ trail.length.toFixed() }} m</dd>
      <dt>Number of trees</dt>
      <dd>{{ trail.treeList.length }}</dd>
      <dt>Number of species</dt>
      <dd>{{ (trail.getTreeBucket() | keyvalue).length }}</dd>
    <button mat-raised-button (click)="showOnMap()" color='primary'>
      <mat-icon>map</mat-icon>
      View on map
    </button>
    </dl>
  </div>
  <mat-divider></mat-divider>
  <h2>
    Discover these species on this trail:
  </h2>
  <div class="plants">
    <div *ngFor="let plantekey of trail.getTreeBucket() | keyvalue">
      <app-plant-list-item *ngIf="(dataService.all | async).plants[plantekey.key]; let plant"
        [plant]="(dataService.all | async).plants[plantekey.key]"
        [count]="plantekey.value">
      </app-plant-list-item>
    </div>
  </div>
</div>
