<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">
    Garage Next Door
</div>
</ion-header>


<ion-content padding>
  <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="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="garages" >
            <li *ngFor="let garage_list of garages" (click)="shopdetail(garage_list.id)">
              <div class="fm_listing_top">
                <div class="fm_list_pic"> <img [src]="garage_list.profile_pic"> </div>
                <div class="fm_list_detail">
                  <h6>{{garage_list.name}}</h6>
                  <p>{{garage_list.address}}</p>
           <!-- <fieldset class="rating">
        <input type="radio" id="star5" name="rating"  [(ngModel)]="garage_list.rate" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
        <input type="radio" id="star4half" name="rating"  [(ngModel)]="garage_list.rate" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
        <input type="radio" id="star4" name="rating"  [(ngModel)]="garage_list.rate" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
        <input type="radio" id="star3half" name="rating"  [(ngModel)]="garage_list.rate" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
        <input type="radio" id="star3" name="rating"  [(ngModel)]="garage_list.rate" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
        <input type="radio" id="star2half" name="rating"  [(ngModel)]="garage_list.rate" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
        <input type="radio" id="star2" name="rating"  [(ngModel)]="garage_list.rate" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
        <input type="radio" id="star1half" name="rating"  [(ngModel)]="garage_list.rate" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
        <input type="radio" id="star1" name="rating"  [(ngModel)]="garage_list.rate" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
        <input type="radio" id="starhalf" name="rating"  [(ngModel)]="garage_list.rate" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
    </fieldset> --->
	<rating [(ngModel)]="garage_list.rate" 
        readOnly="true"  
        max="5"  
        emptyStarIconName="star-outline"  
        halfStarIconName="star-half"  
        starIconName="star"  
        nullable="false" 
        (ngModelChange)="onModelChange($event)"></rating>
    
                </div>
                <div class="fm_list_price">
                  <span>{{garage_list.distance}}km</span>
                </div>
                <div class="clear"></div>
              </div>
              <div class="fm_listing_bottom">
               <!-- <div class="fm_line" >
                  <div class="child1"><strong>Open From</strong></div>
                  <div class="child2"  ><p *ngIf="garage_list.open_time" >: &nbsp;{{garage_list.open_time.start}} to {{garage_list.open_time.end}}  </p> <p *ngIf="!garage_list.open_time" >Closed Today</p></div>
                  <div class="clear"></div>
                </div>
                <div class="fm_line">
                  <div class="child1"><strong>Days Open</strong></div>
                  <div class="child2"><p>:&nbsp;<span *ngFor="let days of garage_list.available_days" >{{days}}</span></p></div>
                  <div class="clear"></div>
                </div>-->
                <div class="fm_line">
                  <div class="child1"><strong>Services</strong></div>
                  <div class="child2"><p>:&nbsp;<span class="service">{{garage_list.services}}</span> </p></div>
                  <div class="clear"></div>
                </div>
                 
              </div>
            </li>
      
    

          </ul>
		   	<div class="no_resultfound" *ngIf="!garages" >
    <img src="assets/imgs/noresult.png">
    <p>No Result Found  </p>
     
  </div>
		 
        </div>
      </div>

</ion-content>
