
<ion-content class="bg_transparent">
 <div class="cab_ride_pop">
    <div class="cab_ride_inner theme_bgcolor">
	<div class="cab_ride_down_arrow theme_bgcolor">
        <ion-icon name="ios-arrow-down-outline"(click)="dismiss()"></ion-icon>
      </div>

      <p>{{rates[0].cartype}}</p>
      <!-- <h6>Toyota Etios, Ford Fiesta</h6> -->
      <div class="cab_ride_fare_break">Fare Breakup</div>
      <ion-grid>
        <div *ngFor="let rate of rates" class="txt_cntr">
          <span class="clr_wht">For {{rate.timetype}} time ride</span>
        <ion-row class="textCenter">
          <ion-col col-4>
            <strong>₹ {{rate.intailrate}}</strong>
            <h5>First {{rate.intialkm}}km</h5>
          </ion-col>
          <ion-col col-4>
            <strong>₹ {{rate.standardrate}}/km</strong>
            <h5>After {{rate.intialkm}}km</h5>
          </ion-col>
          <ion-col col-4>
            <strong>₹ {{rate.extrahour}}/hr</strong>
            <h5>Ride time Rate</h5>
          </ion-col>
        </ion-row>
      </div>
      </ion-grid>
      <h6 class="bottom0">Peak  time charges may apply.</h6>
	  <!-- <div class="cab_trip_detail_wrapper">
			<h4 class="text_white">Pickup Point</h4>
			<p class="floatLeft textLeft width50">North Sarovar Road,E City</p>
			<p class="floatRight textRight width50">11 :23 am, 02-08-2017</p>
			<div class="clear"></div>
			<br>
			<h4 class="text_white">Drop Point</h4>
			<p class="floatLeft textLeft width50">Majestic Junction 3rd Street</p>
			<p class="floatRight textRight width50">12 :00 am, 02-08-2017</p>
			<div class="clear"></div>
			<br>
			<br>
	</div> -->
    </div>
	</div>
</ion-content>
<ion-footer>
<button ion-button class="cab_footer_btn width100" (click)="dismiss()">OKAY</button>
</ion-footer>