<ion-view id="tab-settings" class="settings">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>{{'Settings' | translate}}</ion-nav-title>
  </ion-nav-bar>

  <ion-content>
    <div class="settings-list list">
      <div class="item item-divider"></div>
      <a class="item item-icon-left item-icon-right" ui-sref="tabs.addressbook">
        <i class="icon big-icon-svg">
          <img src="img/icon-address-book.svg" class="bg"/>
        </i>
        <span>{{'Address Book' | translate}}</span>
        <i class="icon bp-arrow-right"></i>
      </a>
      <a class="item item-icon-left item-icon-right" ng-click="openExternalLink()">
        <i class="icon big-icon-svg">
          <img src="img/icon-help-support.svg" class="bg"/>
        </i>
        <span>{{'Help & Support' | translate }}</span>
        <i class="icon big-icon-svg">
          <img src="img/icon-link.svg" class="bg just-a-hint"/>
        </i>
      </a>
      <a class="item item-icon-left item-icon-right" ui-sref="tabs.feedback">
        <i class="icon big-icon-svg">
          <img src="img/icon-send-feedback.svg" class="bg"/>
        </i>
        <span>{{'Send Feedback' | translate}}</span>
        <i class="icon bp-arrow-right"></i>
      </a>
      <a ng-if="isCordova" class="item item-icon-left item-icon-right" ui-sref="tabs.shareApp({score: 4, skipped: true, fromSettings: true})">
        <i class="icon big-icon-svg">
          <img src="img/icon-heart.svg" class="bg"/>
        </i>
        <span translate>Share {{appName}}</span>
        <i class="icon bp-arrow-right"></i>
      </a>

      <div class="item item-divider">{{'Preferences' | translate}}</div>

      <a class="item item-icon-left item-icon-right" ui-sref="tabs.notifications">
        <i class="icon big-icon-svg">
          <img src="img/icon-notifications.svg" class="bg"/>
        </i>
        <span>{{'Notifications' | translate}}</span>
        <i class="icon bp-arrow-right"></i>
      </a>
      <a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.language">
        <i class="icon big-icon-svg">
          <img src="img/icon-language.svg" class="bg"/>
        </i>
        <span class="setting-title">{{'Language' | translate}}</span>
        <span class="setting-value">
          {{currentLanguageName | translate}}
        </span>
        <span ng-if="!currentLanguageName" class="setting-value">
          ...
        </span>
        <i class="icon bp-arrow-right"></i>
      </a>
      <a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.unit">
        <i class="icon big-icon-svg">
          <img src="img/icon-unit.svg" class="bg"/>
        </i>
        <span class="setting-title">{{'Bitcoin Unit' | translate}}</span>
        <span class="setting-value">
          {{unitName || '...'}}
        </span>
        <i class="icon bp-arrow-right"></i>
      </a>

      <a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.altCurrency">
        <i class="icon big-icon-svg">
          <img src="img/icon-alternative-currency.svg" class="bg"/>
        </i>
        <span class="setting-title">{{'Alternative Currency' | translate}}</span>
        <span class="setting-value">
          {{selectedAlternative.name || '...'}}
        </span>
        <i class="icon bp-arrow-right"></i>
      </a>

      <a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.fee">
        <i class="icon big-icon-svg">
          <img src="img/icon-network.svg" class="bg"/>
        </i>
        <span class="setting-title">{{'Bitcoin Network Fee Policy' | translate}}</span>
        <span class="setting-value">
          {{feeOpts[currentFeeLevel] | translate}}
        </span>
        <span ng-if="!feeOpts[currentFeeLevel]" class="setting-value">
          ...
        </span>
        <i class="icon bp-arrow-right"></i>
      </a>

      <a class="item has-setting-value item-icon-left item-icon-right" ui-sref="tabs.lockSetup" ng-if="isCordova || isDevel">
        <i class="icon ion-ios-locked-outline" ng-if="locked"></i>
        <i class="icon ion-ios-unlocked-outline" ng-if="!locked"></i>
        <span class="setting-title">{{'Lock App' | translate}}</span>
        <span class="setting-value">
          {{method}}
        </span>
        <i class="icon bp-arrow-right"></i>
      </a>

      <div class="item item-divider" ng-show="wallets[0]">{{'Wallets & Integrations' | translate}}</div>

      <a class="item item-icon-left item-icon-right" href
           ui-sref="tabs.preferences({'walletId': item.id})"
           ng-repeat="item in wallets track by $index">
         <i class="icon big-icon-svg circle">
          <img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !item.color}" ng-style="{'background-color': item.color}" class="bg"/>
        </i>
        <span>
          {{item.name || item.id}}
          <span class="size-12 text-light" ng-show="item.n > 1">
            {{item.m}}-of-{{item.n}}
          </span>
        </span>
        <span class="right text-light assertive" ng-show="!item.isComplete()">
          {{'Incomplete' | translate}}
        </span>
        <span class="right text-light assertive" ng-show="item.isComplete() && item.needsBackup">
          {{'Backup needed' | translate}}
        </span>
        <i class="icon bp-arrow-right"></i>
      </a>

      <a class=" item item-icon-left item-icon-right"
         ng-if="bitpayAccounts || bitpayCards"
         ui-sref="tabs.preferences.bitpayServices">
        <i class="icon big-icon-svg circle">
          <div class="bg icon-bitpay"></div>
        </i>
        <span>BitPay</span>
        <i class="icon bp-arrow-right"></i>
      </a>

      <div ng-repeat="service in buyAndSellServices">
        <a class="item item-icon-right"
          ui-sref="{{service.configSref}}">
          <img ng-src="{{service.logo}}" width="90">
          <i class="icon bp-arrow-right"></i>
        </a>
      </div>

      <div class="item item-divider"></div>

      <a class="item item-icon-right item-icon-left" href ui-sref="tabs.advanced">
        <i class="icon big-icon-svg">
          <img src="img/icon-advanced.svg" class="bg"/>
        </i>
        <span>{{'Advanced' | translate}}</span>
        <i class="icon bp-arrow-right"></i>
      </a>
      <a class="item item-icon-left item-icon-right" href ui-sref="tabs.about">
        <i class="icon big-icon-svg">
          <img src="img/icon-about.svg" class="bg"/>
        </i>
        <span>{{'About' | translate}}</span> {{appName}}
        <i class="icon bp-arrow-right"></i>
      </a>
      <div class="item item-divider"></div>
    </div>
  </ion-content>
</ion-view>
