<ion-view id="view-address-book">
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>
      <span translate>Addressbook</span>
    </ion-nav-title>
    <ion-nav-buttons side="secondary">
      <button class="button button-back button-clear" ui-sref="tabs.addressbook.add">
        <i class="icon ion-ios-plus-empty"></i>
      </button>
    </ion-nav-buttons>
  </ion-nav-bar>

  <ion-content>

    <div class="bar bar-header item-input-inset" ng-show="!isEmptyList">
      <label class="item-input-wrapper">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search"
               placeholder="Search"
               ng-model="addrSearch"
               ng-change="findAddressbook(addrSearch)" ng-model-onblur>
      </label>
    </div>

    <ion-list>
      <ion-item ng-repeat="addrEntry in addressbook"
                class="item-icon-right item-avatar"
                ui-sref="tabs.addressbook.view({address:addrEntry.address})">
        <gravatar name="{{addrEntry.name}}" width="50" email="{{addrEntry.email}}"></gravatar>
        <h2>{{addrEntry.name}}</h2>
        <p>{{addrEntry.address}}</p>
        <i class="icon nav-item-arrow-right"></i>

        <ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
          <i class="icon ion-minus-circled"></i>
        </ion-option-button>

      </ion-item>
    </ion-list>
    <div class="row text-center absolute-center" ng-show="isEmptyList">
      <div id="add-contact" class="col col-80 center-block">
        <img class="col" src="img/item-ico-contact.svg">
        <a class="col col-40 center-block" ui-sref="tabs.addressbook.add">
          Add Contact
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>
