<div class='container'>
   <div class='plant-link'>
      <button mat-raised-button (click)="navigateToDetail()">
         {{ tree?.plant.english || tree?.plant.name }}
      </button>
   </div>
      <div class="row row1">
         <table>
            <tr *ngIf="!!tree?.plant.english">
               <th>
                  Scientific name
               </th>
               <td>
                  {{ tree?.plant.name }}
               </td>
            </tr>
            <tr>
               <th>Trails</th>
               <td>
                  <mat-chip
                     *ngFor="let trail of tree?.trails"
                     (click)="navigateToTrail(trail)"
                  >
                     {{ trail.name }}
               </mat-chip>
               </td>
            </tr>
            <tr>
               <th>Height</th>
               <td [innerText]="tree?.height + ' m'"></td>
            </tr>
            <tr *ngIf="tree?.comments">
               <th>Comments</th>
               <td [innerText]="tree?.comments"></td>
            </tr>
            <tr>
               <td colspan="2"></td>
            </tr>
            <tr *ngFor="let data of tree?.data | keyvalue">
               <th [innerText]="data.key"></th>
               <td [innerText]="data.value"></td>
            </tr>
         </table>
         <img [src]="tree?.getPhotoUrl()" class='img'>
      </div>
</div>
