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

  <ion-content class="padding">
    <div class="list card homeTip" ng-show="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="list card" ng-hide="!txps[0]">
      <a class="item item-icon-right item-heading" ui-sref="tabs.proposals" translate>
        Payment Proposals
        <i class="icon nav-item-arrow-right"></i>

        <span class="badge badge-assertive" ng-show="txpsN>3" translate> {{txpsN}}</span>
      </a>

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

    <div class="list card" ng-if="notifications[0]">
      <a class="item item-icon-right item-heading" ui-sref="tabs.activity">
        <span translate>Recent Activity</span>
        <i class="icon nav-item-arrow-right"></i>
      </a>
      <span ng-if="fetchingNotifications" class="item text-center">
        <ion-spinner icon="lines"></ion-spinner>
        <div translate>Updating activity. Please stand by</div>
      </span>
      <a class="item activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
        <span ng-include="'views/includes/walletActivity.html'"></span>
      </a>
    </div>

    <div class="list card" ng-hide="!wallets[0]">
      <div class="item item-icon-right item-heading">
        <span translate>Wallets</span>
        <a ui-sref="tabs.add"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
      </div>
      <a ng-repeat="wallet in wallets track by $index"
         class="item item-icon-left item-big-icon-left item-icon-right"
         ng-click="openWallet(wallet)">
        <i class="icon big-icon-svg">
          <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
        </i>
        <h2>
          {{wallet.name || wallet.id}}
          <span class="size-12 text-light" ng-show="wallet.n > 1">
            {{wallet.m}}-of-{{wallet.n}}
          </span>
        </h2>

        <p>
        <span ng-show="!wallet.isComplete()" class="assertive" translate>
          Incomplete
        </span>
        <div ng-show="wallet.isComplete()">
          <span ng-show="!wallet.balanceHidden">{{wallet.status.availableBalanceStr}}</span>
          <span ng-show="wallet.balanceHidden" translate>[Balance Hidden]</span>
        </div>
        </p>
        <i class="icon nav-item-arrow-right"></i>
      </a>
      <a ui-sref="bitpayCard.main"
         ng-show="externalServices.BitpayCard"
         class="item item-icon-left item-big-icon-left item-icon-right">
        <i class="icon big-icon-svg">
          <div class="bg icon-bitpay-card"></div>
        </i>
        <h2>BitPay Card</h2>
        <p translate>Add funds to get started</p>
        <i class="icon nav-item-arrow-right"></i>
      </a>
    </div>

    <div class="list card" ng-show="externalServices.BuyAndSell && (glideraEnabled || coinbaseEnabled)">
      <div class="item item-icon-right item-heading" translate>
        Buy &amp; Sell Bitcoin
        <a ui-sref="tabs.buyandsell"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
      </div>
      <a ng-show="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-icon-right">
        <img src="img/glidera-logo.png" width="90"/>
        <i class="icon nav-item-arrow-right"></i>
      </a>
      <!-- disable coinbase for this release -->
      <!-- <a ng-show="coinbaseEnabled" ui-sref="exchange.coinbase" class="item">
        <img src="img/coinbase-logo.png" width="90"> TODO
      </a> -->
    </div>

    <div class="list card" ng-show="externalServices.AmazonGiftCards">
      <a class="item item-icon-left item-icon-right item-big-icon-left" ui-sref="tabs.giftcards.amazon">
        <i class="icon big-icon-svg">
          <div class="bg icon-gift"></div>
        </i>
        <span translate>Buy Amazon.com Gift Card</span>
        <i class="icon nav-item-arrow-right"></i>
      </a>
    </div>

    <div class="list card"
         ng-show="!externalServices.AmazonGiftCards || !externalServices.BitpayCard || !externalServices.BuyAndSell || !wallets[0]">
      <div class="item item-icon-right item-heading" ng-click="shouldHideNextSteps()" translate>
        Next steps
        <i class="icon nav-item-arrow-down" ng-show="!hideNextSteps"></i>
        <i class="icon nav-item-arrow-up" ng-show="hideNextSteps"></i>
      </div>
      <div ng-show="hideNextSteps">
        <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">
           <div class="bg icon-create-wallet"></div>
         </i>
          <span translate>Create a bitcoin wallet</span>
          <i class="icon nav-item-arrow-right"></i>
        </a>
        <a ui-sref="bitpayCard.main" ng-if="!externalServices.BitpayCard" class="item item-icon-left item-big-icon-left item-icon-right next-step">
         <i class="icon big-icon-svg">
           <div class="bg icon-bitpay-card"></div>
         </i>
          <span translate>Add BitPay Card</span>
          <i class="icon nav-item-arrow-right"></i>
        </a>
        <a ng-if="!externalServices.BuyAndSell" ui-sref="tabs.buyandsell" class="item item-icon-left item-big-icon-left item-icon-right next-step">
         <i class="icon big-icon-svg">
           <div class="bg icon-buy-bitcoin"></div>
         </i>
          <span translate>Buy or Sell Bitcoin</span>
          <i class="icon nav-item-arrow-right"></i>
        </a>
        <a ui-sref="tabs.giftcards.amazon" ng-if="!externalServices.AmazonGiftCards" class="item item-icon-left item-big-icon-left item-icon-right next-step">
          <i class="icon big-icon-svg">
            <div class="bg icon-gift"></div>
          </i>
          <span translate>Buy Amazon.com Gift Card</span>
          <i class="icon nav-item-arrow-right"></i>
        </a>
      </div>
    </div>

    <p class="padding" style="text-align:center; color:#999">
{{name}} v{{version}}
    </p>

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