<ion-view id="tab-home">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title><img class="tab-home__logo" src="img/app/logo-negative.svg"></ion-nav-title>
  </ion-nav-bar>

  <ion-content>
    <ion-refresher
     ng-if="isAndroid"
     pulling-icon="ion-ios-refresh"
     spinner="ios-small"
     on-refresh="onRefresh()">
   </ion-refresher>
    <div class="list card release ng-hide" ng-show="newRelease">
      <i class="item icon big-icon-svg">
        <img src="img/icon-update.svg" class="bg"/>
      </i>

      <div class="item title">{{updateText}}</div>

      <div class="button" ng-click="openExternalLink()">
        <span translate>Download</span>
      </div>
    </div>

    <div class="ng-hide" ng-show="showRateCard.value" ng-include="'views/feedback/rateCard.html'"></div>
    <div class="list card homeTip" ng-if="homeTip">
      <div class="item item-icon-right item-heading">
        <a ng-click="hideHomeTip()"><i class="icon ion-ios-close-empty close-home-tip"></i></a>
      </div>
      <div>
        <i class="icon big-icon-svg">
          <img src="img/check-white.svg" class="bg green"/>
        </i>
      </div>
      <div class="title" translate>
        Your bitcoin wallet is ready!
      </div>
      <div class="subtitle" translate>
        On this screen you can see all your wallets, accounts, and assets.
      </div>
    </div>
    <div class="loading-placeholder" ng-show="!txpsFinished || !notificationsFinished || !walletsFinished">
      <div class="row">
        <div class="list card card-loading-placeholder">
          <a class="item item-icon-right item-heading">
            <div class="loading-block-title"></div>
            <i class="icon bp-arrow-right"></i>
          </a>
          <a class="item">
            <div class="loading-block-body"></div>
          </a>
        </div>
      </div>
      <div class="row">
        <div class="list card card-loading-placeholder">
          <a class="item item-icon-right item-heading">
            <div class="loading-block-title"></div>
            <i class="icon bp-arrow-right"></i>
          </a>
          <a class="item">
            <div class="loading-block-body"></div>
          </a>
        </div>
      </div>
    </div>
    <div class="animate-show-hide" ng-show="txpsFinished && notificationsFinished && walletsFinished">
      <div class="list card" ng-hide="!txps[0]">
        <a class="item item-icon-right item-heading" ui-sref="tabs.proposals">
          {{'Payment Proposals'|translate}}
          <i class="icon bp-arrow-right"></i>
          <span class="badge badge-assertive m5t m10r" ng-show="txpsN>3"> {{txpsN}}</span>
        </a>

        <div ng-repeat="tx in txps" ng-click="openTxpModal(tx)">
          <a class="wallet-details__item item item-sub" ng-include="'views/includes/txp.html'"></a>
        </div>
      </div>

      <div class="list card" ng-if="notifications[0] && recentTransactionsEnabled">
        <a class="item item-icon-right item-heading" ui-sref="tabs.activity">
          <span translate>Recent Transactions</span>
          <i class="icon bp-arrow-right"></i>
          <span class="badge badge-assertive m5t m10r" ng-show="notificationsN>3"> {{notificationsN}}</span>
        </a>
        <a class="item item-sub activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
          <span ng-include="'views/includes/walletActivity.html'"></span>
        </a>
      </div>

      <div class="list card">
        <div class="item item-icon-right item-heading">
          <span translate>Wallets</span>
          <a ui-sref="tabs.add" ng-if="wallets[0]"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
        </div>
        <div>
          <a ng-if="!wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step">
           <i class="icon big-icon-svg">
             <img src="img/icon-wallet.svg" class="bg wallet icon-create-wallet"/>
           </i>
            <span translate>Create bitcoin wallet</span>
            <i class="icon bp-arrow-right"></i>
          </a>
          <a ng-repeat="wallet in wallets track by $index"
             class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet"
             ng-click="openWallet(wallet)">
            <i class="icon big-icon-svg">
              <img src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color': wallet.color}" class="bg wallet"/>
            </i>
            <span>
              {{wallet.name || wallet.id}}
            </span>
            <p>
            <span ng-if="!wallet.isComplete()" class="assertive" translate>
              Incomplete
            </span>
            <span ng-if="wallet.isComplete()">
              <span ng-if="!wallet.balanceHidden"> {{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance   + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  ) }} </span>

              <span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
              <span class="tab-home__wallet__multisig-number" ng-if="wallet.n > 1">
                {{wallet.m}}-of-{{wallet.n}}
              </span>
              <i ng-if="!wallet.balanceHidden && (wallet.status.totalBalanceSat != wallet.status.spendableAmount)" class="tab-home__wallet__status-icon ion-ios-timer-outline"></i>
              <span class="assertive" ng-if="wallet.error">{{wallet.error}}</span>
            </span>
            &nbsp;
            </p>
            <i class="icon bp-arrow-right"></i>
          </a>
        </div>
      </div>
      <div class="ng-hide" ng-show="wallets[0] && bitpayCardItems.length>0" ng-include="'views/includes/bitpayCardsCard.html'"></div>
      <div class="ng-hide" ng-show="wallets[0] && buyAndSellItems.length>0" ng-include="'views/includes/buyAndSellCard.html'"></div>
      <div class="ng-hide" ng-show="homeIntegrations.length>0" ng-include="'views/includes/homeIntegrations.html'"></div>
      <div class="ng-hide" ng-show="nextStepsItems.length>0" ng-include="'views/includes/nextSteps.html'"></div>
    </div>
  </ion-content>
</ion-view>
