<ion-header class="theme_dark_bg" [ngClass]="lang=='ar' ? 'ar' : ''">
    <button ion-button class="nav_btn theme_color floatLeft" (click)="back()">
       <ion-icon name="ios-arrow-back"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">{{'userloc.User Location'|translate}}</div>
    <div class="clear"></div>
</ion-header>
<ion-content [ngClass]="lang=='ar' ? 'ar' : ''">
    <div #map id="map"></div>
    <div class="jr_bottom_distance_card" *ngIf="temp">
      <div class="jr_bottom_inside">
        <input class="jr_dest_input from" placeholder="{{'userloc.From'|translate}}" [(ngModel)]="loc.from" [readonly]="true">
        <input class="jr_dest_input to" placeholder="{{'userloc.To'|translate}}" [(ngModel)]="loc.to" [readonly]="true">
      </div>
    </div>
</ion-content>
<ion-footer [ngClass]="lang=='ar' ? 'ar' : ''">
  <div class="jr_bottom_button_bay" *ngIf="!started">
      <button ion-button class="cab_footer_btn" (click)="startRide()">{{'userloc.Start Ride'|translate}}</button>
  </div>
    <div class="jr_bottom_button_bay" *ngIf="temp && started">
      <button ion-button class="cab_footer_btn" (click)="complete()">{{'userloc.Finish Ride'|translate}}</button>
    </div>
</ion-footer>