<ion-view view-title="Nearby">
  <ion-content>
    <!-- Search -->
    <div class="list">
      <div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
        <label class="item-input-wrapper">
          <input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
        </label>
      </div>
      <div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
        <label class="item-input-wrapper">
          <input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
        </label>
        <button class="button button-positive button-small" ng-click="location=''; services=''">
          <i class="ion-close"></i>
        </button>
      </div>

      <!-- List of services -->
      <ion-list>
        <ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
          {{service.title}}
          <i class="icon ion-chevron-right icon-accessory">
                        <span class="badge badge-positive">{{service.total}}</span>
                    </i>
        </ion-item>
      </ion-list>
    </div>

    <!-- List of regions -->
    <div class="list" style="margin-top:-24px">
      <ion-list>
        <ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
          {{location.title}}
          <i class="icon ion-chevron-right icon-accessory">
                        <span class="badge badge-positive">{{location.count}}</span>
                    </i>
        </ion-item>
      </ion-list>
    </div>

  </ion-content>
</ion-view>