<ion-view>
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>Glidera</ion-nav-title>
  </ion-nav-bar>

  <ion-content>

    <div class="box-notification error" ng-show="!network">
      Glidera is disabled for this application
    </div>

    <div class="box-notification warning" ng-show="network == 'testnet'">
      Testnet wallets only work with Glidera Sandbox Accounts
    </div>

    <div ng-if="!token">

      <div ng-init="showOauthForm = false">
        <div class="text-center m20v">
          <img src="img/glidera-logo.png" ng-click="update(token, permissions)" width="200">
        </div>
        <div class="text-center small-10 small-centered columns" ng-show="!showOauthForm">
          <p class="m10b">You can buy and sell Bitcoin with a US bank account directly in Copay.</p>

          <p class="m20t padding text-gray size-12 text-left">
            DISCLOSURE.<br>
            Glidera Inc. (Glidera) is providing the service of buying or selling bitcoins to Copay users.  To enable this
            service, Glidera has registered with US Treasury Department’s FinCEN as a Money Service Business
            (#31000042625755).  Users of Copay must agree to the service agreement presented by Glidera prior to obtaining
            Glidera’s service of buying or selling bitcoins. Service available in U.S. and Canada only. In U.S. (buy & sell) CA, GA, IL, KS,
            MA, MD, MO, MT, MN, SC, TX, AZ, CO, DE, ME, NJ, PA, TN, UT, NV, WI. In Canada (buy & sell) AB, BC, MB, NB, NL, NS, NT, NU,
            ON, PE, SK, YT.
          </p>

          <p class="m20t text-gray size-12">Connect your Glidera account to get started</p>

          <button class="button button-block button-positive"
            ng-click="openExternalLink(glidera.getAuthenticateUrl(), '_system'); showOauthForm = true">
            Connect to Glidera
          </button>
          <div class="m10t">
            <a href ng-click="showOauthForm = true" class="text-gray size-12">
              Do you already have the Oauth Code?
            </a>
          </div>
        </div>
        <div ng-show="showOauthForm">
          <form name="oauthCodeForm" ng-submit="glidera.submitOauthCode(code)" novalidate>
            <div class="card list">
              <label class="item item-input item-stacked-label">
                <span class="input-label">OAuth Code</span>
                <input type="text"
                       ng-model="code"
                       ng-attr-placeholder="{{'Paste the authorization code here'}}" required>
              </label>
            </div>
            <div class="row">
              <div class="col">
                <input type="button"
                       value="Cancel"
                       class="button button-block button-light"
                       ng-click="showOauthForm = false">
              </div>
              <div class="col">
                <input
                   class="button button-block button-positive"
                   type="submit"
                   value="Get started"
                   ng-disabled="oauthCodeForm.$invalid">
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div ng-if="token && permissions">
      <div class="text-center m20v">
        <img src="img/glidera-logo.png" ng-click="update(token, permissions)" width="200">
      </div>
      <div class="list">
        <a class="item item-icon-left item-icon-right" href ui-sref="tabs.buyandsell.glidera.preferences">
          <i class="icon ion-ios-gear"></i>
          <span ng-show="personalInfo">{{personalInfo.firstName}} {{personalInfo.lastName}}</span>
          <span class="item-note" ng-show="email">
            {{email}}
          </span>
          <i class="icon nav-item-arrow-right"></i>
        </a>
      </div>
      <div class="padding">
        <div class="text-center m30v size-12"
          ng-show="status && !status.userCanTransact">
          <h4 class="text-bold"> Complete Setup</h4>
          <div>Your Glidera account is not ready to transact. Please, verify it at <b>Glidera.io</b></div>
          <a class="button"
             ng-init="glideraUrl = network == 'testnet' ? 'https://sandbox.glidera.io/login' :
             'https://glidera.io/login'"
             ng-click="openExternalLink(glideraUrl)">
            Go to Glidera
          </a>
          </div>
        </div>
      </div>

      <div class="list"
        ng-show="status && status.userCanTransact">
        <a ng-show="status.userCanBuy"
            class="item item-icon-right"
            href ui-sref="tabs.buyandsell.glidera.buy">
          <img src="img/buy-bitcoin.svg" alt="buy bitcoin" width="30">
          Buy Bitcoin
          <i class="icon nav-item-arrow-right"></i>
        </a>
        <a class="item item-icon-right"
            ng-show="status.userCanSell"
            href ui-sref="tabs.buyandsell.glidera.sell">
          <img src="img/sell-bitcoin.svg" alt="buy bitcoin" width="30">
          Sell Bitcoin
          <i class="icon nav-item-arrow-right"></i>
        </a>
      </div>

      <div class="list card" ng-show="permissions.transaction_history">
        <div class="item item-heading">
          Activity
        </div>
        <div ng-show="txs.length == 0 "
          class="item">
          No activity in your account
        </div>
        <a ng-repeat="tx in txs"
          ng-click="glidera.openTxModal(token, tx)"
          class="item">

          <span class="item-note">
            <div ng-show="tx.status == 'COMPLETE'">
              <time ng-if="tx.transactionDate">{{tx.transactionDate | amTimeAgo}}</time>
            </div>
            <div ng-show="tx.status == 'PROCESSING'">
              <span ng-if="tx.status == 'PROCESSING'">Processing</span>
            </div>
          </span>

          <img class="left m10r" src="img/bought.svg" alt="bought" width="39" ng-show="tx.type == 'BUY' && tx.status == 'COMPLETE'">
          <img class="left m10r" src="img/bought-pending.svg" alt="bought" width="33" ng-show="tx.type == 'BUY' && tx.status == 'PROCESSING'">
          <img class="left m10r" src="img/sold.svg" alt="bought" width="39" ng-show="tx.type == 'SELL' && tx.status == 'COMPLETE'">
          <img class="left m10r" src="img/sold-pending.svg" alt="bought" width="33" ng-show="tx.type == 'SELL' && tx.status == 'PROCESSING'">

          <h2>
            <span ng-show="tx.type == 'BUY'">Bought</span>
            <span ng-show="tx.type == 'SELL'">Sold</span>
            <b>{{tx.qty}}</b> BTC
          </h2>
          <p>
            {{tx.subtotal|currency:'':2}} {{tx.currency}}
          </p>
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>
