<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title slot="start">
      My Reservation
    </ion-title>
    <ion-item class="checkbox-wrapper">
      <!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
      <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
    </ion-item>
  </ion-toolbar>
</ion-header>
<ion-content>

  <div #mapElement2d style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
  <div #mapElement3d style="width: 100%; height: 100%" id="mapContainer" *ngIf="is3DChecked"></div>
  <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
  <ion-fab vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
    <ion-fab-button>
      <ion-icon name="locate"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

<ion-footer>

  

  <div class="bike-details-container">
    <div class="inner">
      <div class="button-container">
        <ion-grid>
          <ion-row>
            <ion-col>
              Bike Name
            </ion-col>
            <!-- <ion-col>
              {{selectedBike.name}}
            </ion-col> -->
          </ion-row>
          <ion-row>
            <ion-col>
              Battery Level
            </ion-col>
           <!-- <ion-col>

             <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
              {{selectedBike.batteryPercentage + " %"}}
            </ion-col> -->
          </ion-row>
          <ion-row>
            <ion-col>
              Bike Location
            </ion-col>
            <!-- <ion-col>
              {{selectedBike.address}}
            </ion-col> -->
          </ion-row>
          <ion-row>
            <ion-col>
              Bike Distance
            </ion-col>
           <!--  <ion-col>
              {{selectedBike.distance + "m"}}
            </ion-col> -->
          </ion-row>
          
          <ion-row>
              <ion-col>
                <ion-button size="medium" expand="block" (click)="hireBike()">Hire</ion-button>
              </ion-col>
              <ion-col>
                <ion-button size="medium" expand="block" (click)="cancelReservation()">Cancel Reservation</ion-button>
              </ion-col>
            </ion-row>
        </ion-grid>
      </div>
    </div>

  </div>
</ion-footer>