<div class='title'>
  {{ tree?.plant.english || tree?.plant.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 *ngIf="tree?.getPhotoUrl()" [src]="tree?.getPhotoUrl()" class='img'>
      </div>
    </div>
    <div class="flip-card-back">
      <div class="info">
        <dl>
          <dt>Scientific name</dt>
          <dd>{{ tree?.plant.name }}</dd>
          <dt *ngIf="tree?.comments">Comment</dt>
          <dd>{{ tree?.comments }}</dd>
          <dt *ngIf="tree?.plant.family">Family</dt>
          <dd *ngIf="tree?.plant.family">{{ tree?.plant.type }}</dd>
          <dt *ngIf="tree?.plant.spiritual">Spiritual name</dt>
          <dd *ngIf="tree?.plant.spiritual">{{ tree?.plant.spiritual }}</dd>
        </dl>
      </div>
      <button mat-raised-button (click)="navigateToDetail()" class='details'>
        Tree details
      </button>
    </div>
  </div>
</div>