<div class='title'>
  {{ plant?.english || plant?.name }}
</div>
<div class="flip-card" (click)="flipCard()">
  <div [@flip]="isFlipped?'back':'front'" class="flip-card-inner">
    <div class="flip-card-front">
      <img [src]="plant.get_thumbnail_url()" class='img'>
    </div>
    <div class="flip-card-back">
      <div class="info">
        <dl>
          <dt>Scientific name</dt>
          <dd>{{ plant?.name }}</dd>
          <dt *ngIf="plant?.family">Family</dt>
          <dd *ngIf="plant?.family">{{ plant?.type }}</dd>
          <dt *ngIf="plant?.spiritual">Spiritual name</dt>
          <dd *ngIf="plant?.spiritual">{{ plant?.spiritual }}</dd>
          <dt *ngIf="count">Number of plants</dt>
          <dd *ngIf="count">{{ count | i18nPlural: specimen }}</dd>
        </dl>
      </div>
      <button mat-raised-button (click)="navigateToDetail()" class='details'>
        Details
        <mat-icon>info</mat-icon>
      </button>
    </div>
  </div>
</div>