<ion-header class="theme_dark_bg" [ngClass]="lang=='ar' ? 'ar' : ''">
    <button class="nav_btn theme_color floatLeft" menuToggle>
         <ion-icon name="menu"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
    	{{'home.My Rides'|translate}}
    </div>
    <div class="clear"></div>
    <div class="rides_tab">
    	<li [class.active]="tab=='active'" (click)="tab_swap('active')">{{'home.Upcoming'|translate}}
    		<div class="arrow-up"></div>
    	</li>
    	<!-- <li [class.active]="tab=='inactive'" (click)="tab_swap('inactive')">Ongoing
    		<div class="arrow-up"></div>
    	</li> -->
    	<li [class.active]="tab=='inactive1'" (click)="tab_swap('inactive1')">{{'home.Completed'|translate}}
    		<div class="arrow-up"></div>
    	</li>
    </div>
</ion-header>
<ion-content padding class="home_background" [ngClass]="lang=='ar' ? 'ar' : ''">
	<div class="home_content_tab"  [hidden]="tab != 'active'">
		<ul>
			<li *ngFor="let up of upcoming" (click)="rideDetails(up)">
				<div class="home_content_circle">
					<img [src]=up.image />
				</div>
				<div class="home_content_detail">
					<h5>{{up.username}}</h5>
					<p class="yellow">{{up.pickup_area}}</p>
					<p class="grey">{{up.drop_area}}</p>
				</div>
				<div class="home_content_right">
					<p>{{up.pickup_date | date:'dd/MM/yy'}}</p>
					<p>{{up.pickup_time}}</p>
				</div>
				<div class="clear"></div>
			</li>
		</ul>
		<p *ngIf="upcoming?.length==0" class="blank">{{'home.No rides found'|translate}}</p>
	</div>
	<!-- <div class="home_content_tab" [hidden]="tab != 'inactive'">
		3
	</div> -->
	<div class="home_content_tab" [hidden]="tab != 'inactive1'">
		<ul>
			<li *ngFor="let comp of completed" (click)="rideDetails(comp)">
				<div class="home_content_circle">
					<img [src]=comp.image />
				</div>
				<div class="home_content_detail">
					<h5>{{comp.username}}</h5>
					<p class="yellow">{{comp.pickup_area}}</p>
					<p class="grey">{{comp.drop_area}}</p>
				</div>
				<div class="home_content_right">
					<p>{{comp.pickup_date | date:'dd/MM/yy'}}</p>
					<p>{{comp.pickup_time}}</p>
				</div>
				<div class="clear"></div>
			</li>
		</ul>
		<p *ngIf="completed?.length==0" class="blank">{{'home.No rides found'|translate}}</p>
	</div>
</ion-content>
