<!--
  ~ Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<bci-content-w-side-panel>
  <bci-open-layers-map [theme]="'dark'" [minZoom]="minZoom" [maxZoom]="maxZoom" [(zoom)]="zoom" [(center)]="viewCenter" [(rotation)]="rotation"
                       [showAttribution]="true" [projection]="viewProjection">

  </bci-open-layers-map>
  <bci-content-sidebar>
    <bci-content-sidebar-item title="Settings">
      <h5>Zoom</h5>
      <mat-slider thumbLabel
                  [max]="maxZoom"
                  [min]="minZoom"
                  [(ngModel)]="zoom"
      >
      </mat-slider>
      {{zoom}}

      <h5>Minimal Zoom</h5>
      <mat-slider thumbLabel
                  [max]="olMaxZoom"
                  [min]="olMinZoom"
                  [(ngModel)]="minZoom">
      </mat-slider>
      {{minZoom}}

      <h5>Maximal Zoom</h5>
      <mat-slider thumbLabel
                  [max]="olMaxZoom"
                  [min]="olMinZoom"
                  [(ngModel)]="maxZoom">
      </mat-slider>
      {{maxZoom}}
      <h5>Center Lat/Lon</h5>
      <input matInput type="number" [ngModel]="center[1]" (ngModelChange)="onLatChange($event)"/>
      <input matInput type="number" [ngModel]="center[0]" (ngModelChange)="onLonChange($event)"/>

      <h5>Rotation</h5>
      <mat-slider thumbLabel
                  [max]="180"
                  [min]="-180"
                  [(ngModel)]="rotation">
      </mat-slider>
      {{rotation}}

    </bci-content-sidebar-item>
  </bci-content-sidebar>
</bci-content-w-side-panel>
