<ion-header class="theme_dark_bg">
  <button ion-button class="nav_btn theme_color floatLeft" menuToggle>
     <ion-icon name="ios-menu"></ion-icon>
  </button>
  <div class="nav_header_title floatLeft">My Trips</div>
  <button class="nav_btn floatRight"></button>
  <div class="clear"></div>
</ion-header>
<ion-content class="themelogin_background">
  <div class="cab_mytrips_wrapper">
    <div class="cab_trip_tabs_bay">
      <ul>
        <li ion-button [ngClass]="{'active' : slidertab == 0}" (click)="goToSlide(0)">All Rides</li>
        <li ion-button [ngClass]="{'active' : slidertab == 1}" (click)="goToSlide(1)">Upcoming</li>
        <li ion-button [ngClass]="{'active' : slidertab == 2}" (click)="goToSlide(2)">Completed</li>
        <div class="clear"></div>
      </ul>
    </div>
    <div class="cab_trip_content">
      <ion-slides pager="false" #mySlider class="hm_service_slide"  (ionSlideDidChange)="slideChanged()">
        <ion-slide>
          <ul>
            <li (click)="open_page('TripdetailsPage',i)" *ngFor="let ride of trips; let i=index">
              <h6>{{ride.pickup_time}} from {{ride.pickup_area}} to {{ride.drop_area}}</h6>
              <p>{{ride.pickup_date}}<span></span></p>
              <ion-icon name="ios-arrow-forward-outline"></ion-icon>
              <div class="clear"></div>
            </li>
          </ul>
        </ion-slide>
        <ion-slide>
          <ul>
            <span *ngFor="let ride of trips; let i=index">
            <li *ngIf="ride.status=='Booking'||ride.status=='Processing'" (click)="open_page('TripdetailsPage',i)">
              <h6>{{ride.pickup_time}} from {{ride.pickup_area}} to {{ride.drop_area}}</h6>
              <p>{{ride.pickup_date}}<span></span></p>
              <ion-icon name="ios-arrow-forward-outline"></ion-icon>
              <div class="clear"></div>
            </li>
          </span>
          </ul>
        </ion-slide>
        <ion-slide>
          <ul>
            <span *ngFor="let ride of trips; let i=index">
            <li *ngIf="ride.status=='Complete'" (click)="open_page('TripdetailsPage',i)">
              <h6>{{ride.pickup_time}} from {{ride.pickup_area}} to {{ride.drop_area}}</h6>
              <p>{{ride.pickup_date}}</p>
              <ion-icon name="ios-arrow-forward-outline"></ion-icon>
              <div class="clear"></div>
            </li>
          </span>
          </ul>
        </ion-slide>
       </ion-slides>
    </div>
  </div>

</ion-content>
