<ion-view title="Search & Buy">
  <ion-content class="padding">
<!--Search input-->
    <div class="list" ng-hide="search">
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input
          type="text"
          placeholder="What are you looking for?"
          ng-model="itemName">
      </label>
      <label class="item item-input item-select">
        <div class="input-label">Area</div>
        <select ng-model="item.selectedArea">
          <option selected></option>
          <option ng-repeat="area in areas">{{area.name}}</option>
        </select>
      </label>
      <label class="item item-input item-select">
        <div class="input-label">Category</div>
        <select ng-model="item.selectedCategory">
          <option selected></option>
          <option ng-repeat="category in categories">{{category.name}}</option>
        </select>
      </label>
    </div>
<!--Find Button-->
    <div class="row" style="margin-bottom:20px;">
      <div class="col col-33 col-offset-33">
        <button
          style="width:100%"
          class="button button-energized"
          ng-click="findItem(itemName, item)"> Find it!
        </button>
      </div>
    </div>
<!--Loading Animation-->
    <div class="row" ng-show="load" style="text-align:center;">
      <div class="col col-33 col-offset-33">
        <li
          class="ion-loading-c"
          data-pack="default"
          data-tags="spinner, waiting, refresh, animation"
          data-animation="true">
        </li>
      </div>
    </div>
<!--Offers Output-->
    <div>
      <ion-list class="list">
        <ion-item ng-show="visible"> {{items.length+' Offers' || 'No Offer' }} </ion-item>
          <ion-item
            class="item item-thumbnail-left complex-item"
            ng-repeat="item in items"
            ng-click="goToItemView(item.area[0], item.tags[0], item.description, item.name, item.price, item.dt_create, item.photo, item.owner)">
            <img ng-src="{{item.photo}}">
            <h2>{{item.name}}</h2>
            <p>{{item.description}}</p>
            <p>
              {{item.dt_create | date:'mediumDate'}}
              <span
                class="badge badge-positive"
                style="position:inherit;float:right;">$ {{item.price}}
              </span>
            </p>
          </ion-item>
      </ion-list>
    </div>
  </ion-content>
</ion-view>