<div class="spacer"></div>
<div *ngIf="item;let item">
  <div class="card border-0">
    <div class="card-body">
      <fm-back-button></fm-back-button>
      <div class="card menu-card">
        <h1>Cropfield</h1>
        <h4>{{item.name}}</h4>
        <div class="card-text"><span>{{areaInHa(item)| number:'1.2-2'}} ha</span>&nbsp;<span>{{item.data.cropTypeName}}</span></div>
        <div class="card-text"><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
        <ul class="p-0 mt-2">
          <li *ngIf="item.isEditable"><a href="#" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
        </ul>
      </div>
    </div>
    <fm-map-item-list [items]="(items|async)"></fm-map-item-list>
    <fm-map-item-widget-list [item]="item"></fm-map-item-widget-list>
  </div>
 </div>
