<div class="spacer"></div>
<div *ngIf="selectedItem();let item">
  <div class="card border-0">
    <div class="card-body">
      <fm-back-button></fm-back-button>
      <div class="card menu-card">
        <h2 *ngIf="parentOfItemType('vnd.farmmaps.itemtype.cropfield')">{{parentItem.name}}</h2>
        <h1>{{item.name}}</h1>
      </div>
      <ng-container *ngIf="item?.data.layers;let layers">
        <div class="legend-container">
          <div class="card menu-card">
            <h5><span i18n>Date</span>: {{temporalService.selectedDate(itemLayer)}}</h5>
            <div class="d-flex justify-content-between">
              <div>
                <button  *ngIf="temporalService.hasPrevious(itemLayer)" type="button" class="btn btn-link p-0" (click)="handlePreviousTemporal($event)">
                  <i class="fal fa-arrow-circle-left" aria-hidden="true" i18n-title title="Previous"></i>&nbsp;{{ temporalService.previousDate(itemLayer) }}
                </button>
              </div>
              <div>
                <button  *ngIf="temporalService.hasNext(itemLayer)" type="button" class="btn btn-link p-0" (click)="handleNextTemporal($event)">
                  {{ temporalService.nextDate(itemLayer)}}&nbsp;<i class="fal fa-arrow-circle-right" aria-hidden="true" i18n-title title="Next"></i>
                </button>
              </div>
            </div>
            <fm-map-zoom-to-show-alert [layer]="currentItemLayer()?.layer"></fm-map-zoom-to-show-alert>
          </div>
          <div class="card menu-card pt-2">
            <div *ngIf="layers.length>1">
              <select (change)="onLayerChanged($event.target.value)">
                <option *ngFor="let l of layers;" [value]="l.index"  [selected]="itemLayer.layerIndex == l.index">{{l.name}}</option>
              </select>
            </div>
            <fm-map-layer-legend [showTitle]="layers.length == 1"
              [layer]="layer(layers,itemLayer.layerIndex)" [histogramenabled]="true"></fm-map-layer-legend>
          </div>
        </div>
        <div class="card menu-card">
          <ul class="p-0 mt-2">
            <li *ngIf="item.isEditable"><a href="#" class="mt-1 me-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
            <ng-container *ngIf="itemTypeService.isLayer(item)">
              <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
              <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
            </ng-container>
            <li><a href="#" (click)="handleGoToChart(item)"><i class="fal fa-line-chart" aria-hidden="true" i18m-title title="Show chart"></i>&nbsp;<span i18n>Show chart</span></a></li>
            <li><a href="#" (click)="download($event,item,layers,itemLayer.layerIndex)"><i class="fal fa-download" aria-hidden="true" i18n-title title="Download"></i>&nbsp;<span i18n>Download</span></a></li>
          </ul>
        </div>
      </ng-container>
    </div>
  </div>
</div>
