<stapps-context [contentId]="'map'"></stapps-context>

<ion-header class="ion-no-border" translucent="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
        *ngIf="items.length === 1"
        default-href="/"
        (click)="resetView()"
      ></ion-back-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-searchbar
      (keyup)="searchKeyUp($event)"
      [(ngModel)]="queryText"
      (ionClear)="searchStringChanged()"
      placeholder="{{ 'map.page.search_bar.placeholder' | translate }}"
      showClearButton="always"
    >
    </ion-searchbar>
    <ion-buttons slot="end">
      <ion-menu-button menu="context" auto-hide="false">
        <ion-icon name="filter"></ion-icon>
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen id="map">
  <div
    class="map-container"
    #mapContainer
    leaflet
    (leafletMapReady)="onMapReady($event)"
    (leafletClick)="resetView()"
    [leafletOptions]="options"
    [leafletMarkerCluster]="markerClusterData"
    [leafletMarkerClusterOptions]="markerClusterOptions"
  >
    <div *ngIf="position" [leafletLayer]="positionMarker"></div>
  </div>
  <div class="floating-content">
    <div class="map-buttons above">
      <ion-button
        *ngIf="items.length > 1"
        color="light"
        shape="round"
        size="small"
        (click)="showListModal()"
      >
        <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{
          'map.page.buttons.SHOW_LIST' | translate
        }}
      </ion-button>
      <ion-button
        [disabled]="position === undefined"
        color="light"
        shape="round"
        size="small"
        (click)="onPositionClick()"
      >
        <ion-icon
          *ngIf="position !== null; else questionIcon"
          name="locate"
        ></ion-icon>
        <ng-template #questionIcon>
          <ion-icon name="help-circle-outline"></ion-icon>
        </ng-template>
      </ion-button>
    </div>
    <stapps-map-item
      *ngIf="items.length === 1"
      [item]="items[0]"
      (showDetails)="showItemModal($event)"
    ></stapps-map-item>
  </div>
  <div class="map-buttons floating-buttons">
    <ion-button
      *ngIf="items.length > 1"
      color="light"
      shape="round"
      size="small"
      (click)="showListModal()"
    >
      <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{
        'map.page.buttons.SHOW_LIST' | translate
      }}
    </ion-button>
    <ion-button
      [disabled]="position === undefined"
      color="light"
      shape="round"
      size="small"
      (click)="onPositionClick()"
    >
      <ion-icon
        *ngIf="position !== null; else questionIcon"
        name="locate"
      ></ion-icon>
      <ng-template #questionIcon>
        <ion-icon name="help-circle-outline"></ion-icon>
      </ng-template>
    </ion-button>
  </div>
</ion-content>
