<ion-header>
  <div class="app_header">
      <button class="nav_btn back_btn floatLeft" (click)="goBack()">  
      </button>
    <div class="nav_title floatLeft"><h4>AVAILABLE WORKSHOPS <span></span></h4></div>
    <button class="nav_btn nav_filter floatRight" (click)="filterToggle()">

      </button>
    <div class="clear"></div>
</div>
</ion-header>
<ion-content>
  <div class="home_wrapper" *ngIf="garageList">
    <ul>
        <h3>{{getServicecount()}} Garages</h3>
      <li (click)="book(service)" *ngFor="let service of garageList">
        <div class="circle">
          <img [src]="getImage(service.garage_image)">
        </div>
        <div class="details">
            <div class="list_btn book">Book</div>
          <h5>{{service.name | uppercase}}</h5>
          <fieldset class="rating">
              <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
              <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
              <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
              <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
              <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
              <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
              <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
              <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
              <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
              <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
          </fieldset>
          <p>{{service.total_review}}</p>
          <h6 class="floatLeft"><span class="">Total Amount : <strong>${{service.total_price}}</strong></span></h6>
          <!-- <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span> -->
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
      </li>
      <!-- <li (click)="goToPage('bookservice')">
          <div class="circle">
            <img src="../../assets/img/asset_shop2.png">
          </div>
          <div class="details">
              <div class="list_btn book">Book</div>
            <h5>Presto Towing Services</h5>
            <fieldset class="rating">
                <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
                <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
                <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
                <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
                <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
            </fieldset>
            <p>34 Reviews</p>
            <h6 class="floatLeft"><span class="">Total Amount : <strong>$180</strong></span></h6>
            <span class="floatRight playit"><img src="../../assets/img/asset_playit.png"></span>
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
        </li> -->
    </ul>
  </div>

  <div class="filter_menu" *ngIf="filterShow" [@slideInOut]>
      <div class="menu_outter" (click)="filterToggle()">
      </div>
      <div class="menu_inner">
        <h4>Sort by</h4>
        <ul>
          <li (click)="filterToggle()">Amount</li>
          <li (click)="filterToggle()">Location</li>
          <li (click)="filterToggle()">Rating</li>
          <li (click)="filterToggle()">Only Premium</li>
        </ul>
      </div>
    </div>
</ion-content>