<ion-header class="nav_header theme_primary">
  <button class="nav_btn floatLeft" ion-button>
      <ion-icon name="ios-menu" menuToggle></ion-icon>
  </button>
  <div class="nav_header_title floatLeft">
 My Bookings
  </div>
</ion-header>
<ion-content padding class="page_background">
  <div class="fm_list">
    <div class="fm_list_tab">
	       <ul>
         
        <li [ngClass]="{'active' : slidertab == 1}" (click)="goToSlide(1)">BOOKED<ion-badge color="danger" *ngIf="book_list" >{{book_list.active_count}}</ion-badge></li>
        <li [ngClass]="{'active' : slidertab == 2}" (click)="goToSlide(2)">COMPLETED</li>
        <div class="clear"></div>
      </ul>
	<ion-slides pager="false" #mySlider class="fm_slide"  (ionSlideDidChange)="slideChanged()">
          <ion-slide class="theme_secondary">
              <ion-list *ngIf="book_list">
                <ion-item (click)="booking_details(bookings.id,'read_garage_status')" *ngFor="let bookings of book_list.booked" [ngClass]="(bookings.read_garage_status == 0)?'stat':''">
                  <h5>{{bookings.name}} </h5>
                  <div class="fill_detail">
                      <div class="fill_detail_half">
                        <p>Booked Service:</p>
                        <h6 *ngIf="bookings.service!=null" >{{bookings.service}}</h6>
                        <h6 *ngIf="bookings.service_name!=''" >{{bookings.service_name}}</h6>
                      </div>
                      <div class="fill_detail_half pl15">
                        <p>Booked for:</p>
                        <h6  *ngIf="bookings.book_time!=null" >{{bookings.book_date |date:'EE,dd.MM.yyyy' }},{{bookings.book_time }}</h6>
                        <p>Total Amount:<strong class="text_green">€{{bookings.price}}</strong></p>
                      </div>
                      <div class="clear"></div>
                  </div>
                </ion-item>
                  <div *ngIf="book_list.booked.length <=0" class="empty_div_style">
				No Booking Found   
			</div>
              </ion-list>
            
			  
          </ion-slide>
		  
         
		  
          <ion-slide class="theme_secondary">
            <ion-list *ngIf="book_list">
             
			  
			   <ion-item (click)="booking_details(bookings.id)" *ngFor="let bookings of book_list.completed" >
                  <h5>{{bookings.name}} </h5>
                  <div class="fill_detail">
                      <div class="fill_detail_half">
                        <p>Booked Service:</p>
                        <h6 *ngIf="bookings.service!=null" >{{bookings.service}}</h6>
                        <h6 *ngIf="bookings.service_name!=''" >{{bookings.service_name}}</h6>
                      </div>
                      <div class="fill_detail_half pl15">
                        <p>Booked for:</p>
                        <h6  *ngIf="bookings.book_time!=null" >{{bookings.book_date |date:'EE,dd.MM.yyyy' }},{{bookings.book_time }}</h6>
                        <p>Total Amount:<strong class="text_green">€{{bookings.price}}</strong></p>
                      </div>
                      <div class="clear"></div>
                  </div>
                </ion-item>
                <div *ngIf="book_list.completed.length <=0" class="empty_div_style">
				No Booking Found   
			</div>
            </ion-list >
			  
          </ion-slide>
        </ion-slides>
	 
   <div class="empty_div_style" *ngIf="!book_list">
				No Booking Found   
			</div>
    </div>
  </div>

</ion-content>
