<ion-header class="nav_header theme_primary">
    <button class="nav_btn floatLeft" ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <div class="nav_header_title floatLeft">
        Offers
    </div>
</ion-header>
<ion-content>
   <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <div class="offer_wrapper">
    <ul  *ngIf="offers.length >0">
      <li *ngFor="let offer_list of offers" (click)="get_profile(offer_list.garage_id,offer_list,offer_list.service_id)">
        <div class="offer_image">
            <img *ngIf="offer_list.img" [src]="offer_list.img">
        </div>
        <div class="offer_detail">
          <h5>{{offer_list.description}}</h5>
          <h6><span class="floatLeft">{{offer_list.garage_name}}</span>
            <span  class="floatLeft"><rating [(ngModel)]="offer_list.rate"   
            readOnly="true"  
            max="5" name="rate"  
            emptyStarIconName="star-outline"  
            halfStarIconName="star-half"  
            starIconName="star"></rating></span>
            <div class="clear"></div>
          </h6>
          <p class="textRight"><span class="discount_price">-{{offer_list.discount}}%</span></p>
          <p class="textRight"><span class="actual_price"> {{offer_list.price}}</span><span class="final_price">€ {{offer_list.total_price}}</span></p>
          </div>
          <div class="clear"></div>
      </li>

     <!--<div class="fm_wrapper fm_margin_top0">
        <div class="fm_editprofile_banner"  style="height:100px;">
          <div class="fm_oil_top_div">
            <div class="fm_oil_top_inner_div">
              <div class="fm_oil_top_head fm_bordernone">
                <div class="fm_oil_head1">
                  <img src="assets/icon/fm_emi_icon.png">
                </div>
                <div class="fm_oil_head2">
                  <h5>EMISSION TEST</h5>
                </div>
                <div class="clear"></div>
              </div>
            </div>
          </div>
        </div> -->
        <!-- <div class="fm_map_div">
        </div> -->
        <!-- <div class="fm_listing">
          <ul *ngIf="offers.length >0">    
              <li *ngFor="let offer_list of offers" (click)="get_profile(offer_list.garage_id,offer_list,offer_list.service_id)">
                  <div class="offer_top">
                     <div class="offer_left"> -->
                      <!--  <h4 class="floatRight">
                            {{offer_list.discount}}% OFF
                          </h4> -->
                        <!-- <img *ngIf="offer_list.img" [src]="offer_list.img">
						 
                    </div> 
                    <div class="offer_right">
                      <ion-row>
                          <ion-col col-12 class="p0">
                              <h5 class="floatLeft">{{offer_list.description}}</h5>
                              <div class="clear"></div>
                              <p class="floatLeft" style="font-style:italic;padding-bottom:10px;color:#449db2;">{{offer_list.garage_name}}</p>
							   <rating [(ngModel)]="offer_list.rate"   
        readOnly="true"  
        max="5" name="rate"  
        emptyStarIconName="star-outline"  
        halfStarIconName="star-half"  
        starIconName="star"  ></rating>
                          </ion-col>
                        </ion-row>
                      <ion-row>
                        <ion-col col-5 class="p0">
                          
                        </ion-col>
                        <ion-col col-1 class="p0"></ion-col>
                        <ion-col col-6 class="textRight p0">
                          <p><i>-{{offer_list.discount}}%</i></p>
                        </ion-col>
                      </ion-row>
                      <ion-row>
                          <ion-col col-5 class="p0"> 
                            <p>€ {{offer_list.price}}</p>
                          </ion-col>
                          <ion-col col-1 class="p0"></ion-col>
                          <ion-col col-6 class="textRight p0">
                            <p><i>€ {{offer_list.total_price}}</i></p>
                          </ion-col>
                        </ion-row>
                         
                      </div>
                      <div class="clear"></div>
                  </div>
                </li> 
       
			<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
				<ion-infinite-scroll-content>
				</ion-infinite-scroll-content>
			</ion-infinite-scroll>-->

          </ul>
          <div class="no_result_found" *ngIf="offers.length <=0">
              <div class="no_result_icon">
                 <img src="assets/imgs/icon4.png">
              </div>
              <p>
                 No result found
              </p>
          </div>
        </div>

</ion-content>
