  <div class='title'>
    {{ trail?.name }}
  </div>
  <div class="flip-card" (click)="flipCard()">
    <div [@flip]="isFlipped?'back':'front'" class="flip-card-inner">
      <div class="flip-card-front">
        <div class='dndZone' app-dnd (fileDropped)="onFileDropped($event)">
          <img [src]="trail?.getPhotoUrl()" class='img'>
        </div>
        <p class="desc">{{ trail?.description }}</p>
      </div>
      <div class="flip-card-back">
        <div class="info">
          <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>
          </dl>
        </div>
        <button mat-raised-button (click)="showDetails(trail)">
          <mat-icon>info</mat-icon>
          Details
        </button>
        <button mat-raised-button *ngIf="withMapButton" (click)="showOnMap(trail)">
          <mat-icon>map</mat-icon>
          Map
        </button>
      </div>
    </div>
  </div>