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

  <ion-content>

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

    <div class="box-notification notice" ng-show="limits && !buy.show2faCodeInput && !buy.success">
      <span class="text-light">Daily buy limit</span>:
      {{limits.dailyBuy|currency:'':2}} {{limits.currency}}
      (remaining {{limits.dailyBuyRemaining|currency:'':2}} {{limits.currency}})
      <br>
      <span class="text-light">Monthly buy limit</span>:
      {{limits.monthlyBuy|currency:'':2}} {{limits.currency}}
      (remaining {{limits.monthlyBuyRemaining|currency:'':2}} {{limits.currency}})
    </div>

    <div class="box-notification warning" ng-show="limits.transactDisabledPendingFirstTransaction  && !buy.success">
      <span class="text-warning">
        This operation was disabled because you have a pending first transaction
      </span>
    </div>

    <div ng-show="!buy.show2faCodeInput && !buy.success">

      <form name="buyPriceForm" ng-if="token"
        ng-submit="buy.get2faCode(token)" novalidate>

        <div class="list card">
          <label class="item item-input item-stacked-label">
            <span class="input-label">Amount in {{showAlternative ? 'USD' : 'BTC'}}</span>
            <input ng-show="!showAlternative"
                   type="number"
                   id="qty" ignore-mouse-wheel
                   name="qty"
                   ng-attr-placeholder="{{'Amount'}}"
                   ng-minlength="0.00000001"
                   ng-maxlength="10000000000"
                   ng-model="qty"
                   autocomplete="off"
                   ng-change="buy.getBuyPrice(token, {'qty': qty})">

            <input ng-show="showAlternative"
                   type="number"
                   id="fiat" ignore-mouse-wheel
                   name="fiat"
                   ng-attr-placeholder="{{'Amount'}}"
                   ng-model="fiat"
                   autocomplete="off"
                   ng-change="buy.getBuyPrice(token, {'fiat': fiat})">

            <a ng-show="!showAlternative"
               class="postfix"
               on-tap="showAlternative = true; qty = null; buy.buyPrice = null">BTC</a>
            <a ng-show="showAlternative"
               class="postfix"
               on-tap="showAlternative = false; fiat = null; buy.buyPrice = null">USD</a>
          </label>
        </div>

        <wallets ng-if="wallets[0]" wallets="wallets"></wallets>

        <div class="text-center text-gray size-12 m20v" ng-show="!buy.gettingBuyPrice && buy.buyPrice.qty">
          Buy
          <span ng-show="qty">{{buy.buyPrice.subtotal|currency:'':2}} {{buy.buyPrice.currency}} in Bitcoin</span>
          <span ng-show="fiat">{{buy.buyPrice.qty}} BTC</span>
          at  {{buy.buyPrice.price}} {{buy.buyPrice.currency}}/BTC
        </div>
        <div class="text-center text-gray size-12 m20b" ng-show="!buy.gettingBuyPrice && !buy.buyPrice.qty">
          (Enter the amount to get the exchange rate)
        </div>

        <div class="text-center text-gray size-12 m20b" ng-show="buy.gettingBuyPrice">
          ...
        </div>

        <button class="button button-standard button-primary"
                type="submit"
                ng-disabled="limits.transactDisabledPendingFirstTransaction || !buy.buyPrice.qty || buy.loading">
          Continue
        </button>
      </form>
    </div>
    <div ng-show="buy.show2faCodeInput && !buy.success">
      <div class="m10t text-center">
{{buy.buyPrice.subtotal|currency:'':2}} {{buy.buyPrice.currency}} &rarr; {{buy.buyPrice.qty}} BTC
        <p class="m20t">
          A SMS containing a confirmation code was sent to your phone. <br>
          Please, enter the code below
        </p>
        <form name="buyForm"
          ng-submit="buy.sendRequest(token, permissions, twoFaCode)" novalidate>
          <div class="list card">
            <label class="item item-input">
              <input type="number" ng-model="twoFaCode" placeholder="2FA Code" required ignore-mouse-wheel>
            </label>
          </div>
          <button class="button button-standard button-primary"
                  type="submit" ng-disabled="buyForm.$invalid || buy.loading">
            Buy
          </button>
        </form>
        <p class="m10t size-12 text-gray padding">
       Fiat will be immediately withdrawn from your bank account. The bitcoins will be purchased and deposited to your wallet in 2-4 business days.
        </p>
      </div>
    </div>
    <div class="text-center padding" ng-show="buy.success">
      <h1>Purchase initiated</h1>
      <p class="text-gray">
      A transfer has been initiated from your bank account. Your bitcoins should arrive to your wallet in 2-4 business days.
      </p>

      <button class="button button-standard button-primary" ui-sref="tabs.buyandsell.glidera">OK</button>
    </div>
  </ion-content>
</ion-view>
