<ion-content class="bg_transparent">
  <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">Fare Breakup</div>
      <ion-grid>
        <ion-row class="textCenter">
          <ion-col col-4>
            <strong>₹ {{carTypes[carIndex].intailrate}}</strong>
            <h5>First {{carTypes[carIndex].intialkm}}km</h5>
          </ion-col>
          <ion-col col-4>
            <strong>₹ {{carTypes[carIndex].standardrate}}/km</strong>
            <h5>After {{carTypes[carIndex].intialkm}}km</h5>
          </ion-col>
          <ion-col col-4>
            <strong>₹ {{carTypes[carIndex].extrahour}}/hour</strong>
            <h5>Ride time Rate</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>
  <div class="cab_footer_btn_bay">
    <button ion-button class="cab_footer_btn floatRight" (click)="bookNow()">RIDE NOW
    </button>
    <button ion-button class="cab_footer_btn floatLeft"  (click)="bookLater()">RIDE LATER
    </button>
    <div class="clear"></div>
  </div>
</ion-footer>
