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

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


<ion-header class="jr_theme_color jr_header" [ngClass]="lang=='ar' ? 'ar' : ''">
  <button ion-button class="jr_left jr_header_btn jr_back_icon" (click)="goBack()"></button>
  <div class="jr_header_title">
    <h4>{{'ridesummary.Quickride Details'|translate}}</h4>
  </div>
  <button ion-button class="jr_right jr_header_btn"></button>
  <div class="jr_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">{{'ridesummary.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">{{'ridesummary.To'|translate}}</div>
        <div class="child2">
          <strong>{{loc.to}}</strong>
          <p>{{loc.toAd}}</p>
        </div>
        <div class="jr_clear"></div>
      </li>
    </div>
    <hr>
    <br>

    <span *ngIf="driver">
      <div class="jr_search_bottom_bay jr_padding0">
        <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}} {{'ridesummary.Ratings'|translate}}</span>
          <br>
        </div>
        <div class="jr_clear"></div>
      </div>
      <br>
    </span>
    <hr>
   <div class="jr_car_info">
     <div class="">
        <ion-grid class="jr_padding0">
            <ion-row>
              <!-- <ion-col col-2 class="jr_padding0">
                  <div class="jr_car_info_photo"><img src="assets/img/jr_car_img.png"></div>
              </ion-col> -->
              <ion-col col-4 class="jr_padding0">
                  <div class="jr_car_info_detail jr_padding0">
                    <p>{{'ridesummary.Total'|translate}}</p>
                      <h6>{{ride?.km}} {{'ridesummary.km'|translate}}</h6>
                      </div>
                      <div class="jr_clear"></div>
              </ion-col>
              <ion-col col-4 class="jr_padding0">
                  <div class="jr_car_info_detail jr_padding0">
                      <p>{{'ridesummary.Discount'|translate}}</p>
                      <h6>Rs. {{ride?.discount}}</h6>
                      </div>
                      <div class="jr_clear"></div>
              </ion-col>
              <ion-col col-4 class="jr_padding0 right">
                  <div class="jr_car_info_detail jr_padding0">
                      <p>{{'ridesummary.Total Price'|translate}}</p>
                      <h6>Rs. {{ride?.amount}}</h6>
                      </div>
                      <div class="jr_clear"></div>
              </ion-col>
            </ion-row>
          </ion-grid>  
     </div>
     <div class="jr_clear"></div>
   </div>

    <div class="jr_bottom_button_bay">
      <button ion-button class="jr_offer_ride2" (click)="close()">{{'ridesummary.Close'|translate}}</button>
    </div>
  </div>

</ion-content>