<ion-content class="bg_transparent" [ngClass]="lang=='ar' ? 'ar' : ''">
  <div class="cab_ride_pop">
    <div class="cab_ride_inner theme_bgcolor" *ngIf="carTypes">
      <div class="cab_ride_down_arrow theme_bgcolor">
        <ion-icon name="ios-arrow-down-outline"(click)="dismiss()"></ion-icon>
      </div>
      <p>{{carTypes[carIndex].car_type}}</p>
      <!-- <h6>Toyota Etios, Ford Fiesta</h6> -->
      <div class="cab_ride_fare_break">{{'ridepop.Fare Breakup'|translate}}</div>
      <ion-grid>
        <ion-row class="textCenter">
          <ion-col col-4>
            <strong>₹ {{carTypes[carIndex].intailrate}}</strong>
            <h5>{{'ridepop.First'|translate}} {{carTypes[carIndex].intialkm}}{{'ridepop.km'|translate}}</h5>
          </ion-col>
          <ion-col col-4>
            <strong>₹ {{carTypes[carIndex].standardrate}}/{{'ridepop.km'|translate}}</strong>
            <h5>{{'ridepop.After'|translate}} {{carTypes[carIndex].intialkm}}{{'ridepop.km'|translate}}</h5>
          </ion-col>
          <ion-col col-4>
            <strong>₹ {{carTypes[carIndex].extrahour}}/{{'ridepop.hour'|translate}}</strong>
            <h5>{{'ridepop.Ride time Rate'|translate}}</h5>
          </ion-col>
        </ion-row>
      </ion-grid>
      <!-- <h6 class="bottom0">Peak  time charges may apply.</h6> -->
      <div class="cab_ride_bottom_section">
        <li class="c1" *ngFor="let car of carTypes; let i = index;" [style.backgroundImage]="'url('+ car.car_image +')'" (click)="carClick(i)">
          <p>{{car.car_type}}</p>
        </li>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</ion-content>
<ion-footer [ngClass]="lang=='ar' ? 'ar' : ''">
  <div class="cab_footer_btn_bay">
    <button ion-button class="cab_footer_btn floatRight" (click)="bookNow()">{{'ridepop.RIDE NOW'|translate}}
    </button>
    <button ion-button class="cab_footer_btn floatLeft"  (click)="bookLater()">{{'ridepop.RIDE LATER'|translate}}
    </button>
    <div class="clear"></div>
  </div>
</ion-footer>
