{{#yield-scripts}}
  <script src="/bower/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js"></script>
  <script src="/bower/jquery-serialize-object/dist/jquery.serialize-object.min.js"></script>
  <script src="/bower/crypto-js/crypto-js.js"></script>
  <script src="/js/bip38.min.js"></script>
  <script src="/js/bip39.min.js"></script>
  <script src="/js/wallet.js"></script>
{{/yield-scripts}}

<h1>Wallet</h1>

<div class="well">
  Your address is <span class="address"></span>
</div>

<div class="form-group has-feedback" style="display: none">
  <div class="input-group" style="width: 100%">
    <label for="password">Password:</label>
    <input id="password" name="password" type="password" data-password="true" class="form-control"  />
  </div>
</div>

<div class="wallet" style="display: none">
  <input type="hidden" id="username" name="username" value="{{user}}" />
  <input type="hidden" id="email" name="email" />

  <div class="well">
    <span id="fetching" class="lead"><i class="fa fa-refresh fa-spin"></i> Fetching balance...</span>
    <span id="balances" style="display: none">
      <b id="balance" class="lead">0</b> <b id="unit" class="lead"></b> 
      (<b id="fiat" class="lead">0 CAD</b>)
    </span>

    <div class="pull-right">
      <button id="manage" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Manage Keys">
        <i class="fa fa-cog fa-lg"></i>
      </button>
      <button id="backup" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Wallet Backup">
        <i class="fa fa-download fa-lg"></i>
      </button>
    </div>
  </div>

  <div id="keys_updated" class="alert alert-success" style="display: none">
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Wallet keys updated
  </div>

  <div id="transaction_sent" class="alert alert-success" style="display: none">
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <p>Transaction sent!</p><br />
    <button id="blockchain" class="btn btn-success">View on Blockchain</button>
  </div>

  <div id="keys" style="display: none">
    <h3>Settings</h3>

    <form>
      <div class="form-group has-feedback">
        <div class="input-group" style="width: 100%">
          <label for="key">
            Address or Key:
          </label>
          <textarea id="key" name="key" class="form-control" rows="5" data-key="true"></textarea>
        </div>
      </div>

      <input type="hidden" id="pubkey" name="pubkey" />
      <input type="hidden" id="privkey" name="privkey" />

      <div class="form-group has-feedback" style="display: none">
        <div class="input-group" style="width: 100%">
          <label for="keytype">Detected Type:</label>
          <select id="keytype" name="keytype" class="form-control">
            <option value="unknown">Unknown</option>
            <option value="address">Bitcoin Address (starts with 1 or 3)</option>
            <option value="wif">Private Key (starts with 5 or L or K)</option>
            <option value="xpub">HD Wallet Pubkey (starts with xpub)</option>
            <option value="xprv">HD Wallet Private Key (starts with xprv)</option>
            <option value="aes">AES Encrypted Private Key (starts with U)</option>
            <option value="bip38">BIP38 Encrypted Private Key (starts with 6)</option>
            <option value="bip39">BIP39 Mnemonic (series of 12-24 words)</option>
          </select>
        </div>
      </div>

      <button id="generate" class="btn btn-success pull-right" type="button"><i class="fa fa-bolt"></i> Create New Wallet</button>

      <input id="save" class="btn btn-primary" type="button" value="Save" />
      <input id="cancel" class="btn btn-default" type="button" value="Cancel" />
    </form>
  </div>

  <div id="withdrawal" style="display: none">
    <h3>Send Payment / Withdrawal</h3>

    <div id="invalid_keys" class="alert alert-danger" style="display: none">
      <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      Invalid passphrase or problem with private key
    </div>

    <form>
      <div class="form-group has-feedback">
        <div class="input-group">
          <label for="amount">Amount:</label>
          <input type="number" id="amount" name="amount" class="form-control" min="0" required />
          <span class="input-group-btn">
            <button id="currency_toggle" type="button" class="btn btn-primary"></button>
          </span>
          <span class="input-group-btn">
            <button id="max" type="button" class="btn btn-primary">Max</button>
          </span>
        </div>
        <div class="help-block with-errors"></div>
      </div>

      <div class="form-group has-feedback">
        <div class="input-group" style="width: 100%">
          <label for="amount">To Address:</label>
          <input type="text" id="recipient" name="recipient" class="form-control" data-address="true" required />
        </div>
        <div class="help-block with-errors"></div>
      </div>  
      
      <div class="form-group has-feedback">
        <div class="input-group" style="width: 100%">
          <label for="priority">Fee Priority for Confirmation Time:</label>
          <select id="priority" name="priority" class="form-control" required>
            <option value="low">Low</option>
            <option value="medium">Medium</option>
            <option value="high">High</option>
          </select>
        </div>
      </div>

      <input id="send" class="btn btn-primary" type="button" value="Calculate Fee and Confirm Transaction" />
    </form>
  </div>
</div>

<div class="dialog" style="display: none">
  <div style="margin-bottom: 10px">
    <label>Amount:</label> <span class="amount"></span><br />
    <label>Fee:</label> <span class="fee"></span><br />
    <label>To:</label> <span class="address"></span>
  </div>
</div>