<style>
    .left{
      text-align: left !important;
    }
    .right{
      text-align: right !important;
    }
  </style>


<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">{{'ride.Quickride Details'|translate}}</div>
    <div class="clear"></div>
  </ion-header>


<ion-content padding [ngClass]="lang=='ar' ? 'ar' : ''">
<div class="jr_profile_content1">
  <div class="jr_from_to">
    <li>
      <div class="child1 from">{{'ride.From'|translate}}<div class="jr_box1"></div></div>
      <div class="child2"><strong>{{loc.from}}</strong>
      <p>{{loc.fromAd}}</p></div>
      <div class="jr_clear"></div>
    </li>
    <li>
      <div class="child1 to">{{'ride.To'|translate}}</div>
      <div class="child2"><strong>{{loc.to}}</strong>
      <p>{{loc.toAd}}</p></div>
      <div class="jr_clear"></div>
    </li>
  </div>
  <hr>
  <br>


  <div class="jr_search_bottom_bay jr_padding0" *ngIf="driver">
    <div class="jr_search_profile">
      <img [src]=baseUrl+driver.image>
    </div>
    <div class="jr_search_profile_detail">
      <br>
      <h6>{{driver.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{driver.age}} Y/O</h6>
      <span class="jr_star_ratting"><img src="assets/img/jr_star.png"><strong>{{driver.rating}}/5</strong>{{driver.ratingCount}} {{'ride.Ratings'|translate}}</span><br>
    </div>
    <div class="jr_clear"></div>
  </div>

   <div class="jr_bottom_button_bay">
      <button ion-button class="cab_footer_btn" (click)="track()">{{'ride.Track Driver'|translate}}</button>
    </div>
</div>

</ion-content>

