<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">
  Bookings
  </div>
</ion-header>
<ion-content padding class="page_background">
  <div class="fm_list">
    <div class="fm_list_tab">
		       <ul>
        <li [ngClass]="{'active' : slidertab == 0}" (click)="goToSlide(0)">Booked</li>
        <li [ngClass]="{'active' : slidertab == 1}" (click)="goToSlide(1)">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)" *ngFor="let bookings of book_list.booked" [ngClass]="(bookings.read_user_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!=null" >{{bookings.service_name}}</h6>
                        </div>
                        <div class="fill_detail_half pl15">
                          <p>Booked for:</p>
                          <h6>{{bookings.book_date |date:'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 class="no_resultfound" *ngIf="book_list.booked.length <=0" >
    <img src="assets/imgs/noresult.png">
    <p>No Booking Found  </p>
     
  </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.active">
                <div class="fm_list_left">
                  <div class="fm_list_top">
                    <div class="fm_list_top_circle floatLeft">
						<img *ngIf="bookings.profile_pic" [src]="bookings.profile_pic" >
					</div>
                    <h4 class="floatLeft">{{bookings.name}}</h4>
					 <h4 class="floatRight red" *ngIf="bookings.book_time!=null" >{{bookings.book_time }}</h4>
                    <div class="clear"></div>
                    <p>Repair Details:</p>
                    <div class="fm_list_bottom">
                     <ul>
                          <li *ngIf="bookings.service!=null" >{{bookings.service}}</li>
                          <li *ngIf="bookings.service_name!=null" >{{bookings.service_name}}</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="fm_list_right">
                  <p>{{bookings.book_date |date:'EE'}}</p>
                   <h6>{{bookings.book_date |date:'dd.MM.yyyy'}}</h6>
                  <img src="assets/imgs/fm_arw.png">
                </div>
              </ion-item>
			   	<div class="no_resultfound" *ngIf="book_list.active.length <=0" >
    <img src="assets/imgs/noresult.png">
    <p>No Booking Found  </p>
     
  </div>
            </ion-list > -->
			<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!=null" >{{bookings.service_name}}</h6>
                        </div>
                        <div class="fill_detail_half pl15">
                          <p>Booked for:</p>
                          <h6>{{bookings.book_date |date:'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 class="no_resultfound" *ngIf="book_list.completed.length <=0" >
    <img src="assets/imgs/noresult.png">
    <p>No Booking Found  </p>
     
  </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"> -->
                <!-- <div class="fm_list_left"> -->
                  <!-- <div class="fm_list_top"> -->
                    <!-- <div class="fm_list_top_circle floatLeft"> -->
						<!-- <img *ngIf="bookings.profile_pic" [src]="bookings.profile_pic" > -->
					<!-- </div> -->
                    <!-- <h4 class="floatLeft">{{bookings.name}} </h4> -->
					 <!-- <h4 class="floatRight red" *ngIf="bookings.book_time!=null" >{{bookings.book_time }}</h4> -->
                    <!-- <div class="clear"></div> -->
                    <!-- <p>Repair Details:</p> -->
                    <!-- <div class="fm_list_bottom"> -->
                      <!-- <ul> -->
                            <!-- <li *ngIf="bookings.service!=null" >{{bookings.service}}</li> -->
                          <!-- <li *ngIf="bookings.service_name!=null" >{{bookings.service_name}}</li> -->
                      <!-- </ul> -->
                    <!-- </div> -->
                  <!-- </div> -->
                <!-- </div> -->
                <!-- <div class="fm_list_right"> -->
                  <!-- <p>{{bookings.book_date |date:'EE'}}</p> -->
                   <!-- <h6>{{bookings.book_date |date:'dd.MM.yyyy'}}</h6> -->
                  <!-- <img src="assets/imgs/fm_arw.png"> -->
                <!-- </div> -->
              <!-- </ion-item> -->
			   	<!-- <div class="no_resultfound" *ngIf="book_list.completed.length <=0" > -->
    <!-- <img src="assets/imgs/noresult.png"> -->
    <!-- <p>No Booking Found  </p> -->
     
  <!-- </div> -->
                
            <!-- </ion-list > -->
		
          <!-- </ion-slide> -->
		
        </ion-slides>
		  	 	<div class="no_resultfound" *ngIf="!book_list" >
    <img src="assets/imgs/noresult.png">
    <p>No Booking Found  </p>
     
  </div>
    </div>
  </div>

</ion-content>
