<div class='title'>
  {{ zone?.name }}
</div>
<div class="flip-card" (click)="flipCard()">
  <div [@flip]="isFlipped?'back':'front'" class="flip-card-inner">
    <div class="flip-card-front">
      <div *ngIf="zone?.type" class="type">Type: {{ zone.type }}</div>
      <div class="info">
        <dl>
          <div *ngIf="zone?.description">
            <dt>Description</dt>
            <dd>{{ zone?.description }}</dd>
          </div>
          <div *ngFor="let data of zone?.data | keyvalue">
            <dt [innerText]="data.key"></dt>
            <dd [innerText]="data.value"></dd>
          </div>
        </dl>
      </div>
    <div class="flip-card-back">
    </div>
  </div>
</div>