<ion-view>
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>{{'Create Shared Wallet' | translate}}</ion-nav-title>
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-content ng-controller="createController" ng-init="init(3);">
    <form name="setupForm" ng-submit="create(setupForm)" novalidate>
      <div class="card list">
        <label class="item item-input item-stacked-label">
          <span class="input-label" translate>Wallet name</span>
          <input type="text"
            placeholder="{{'Family vacation funds'|translate}}"
            ng-model="formData.walletName"
            ng-required="true"
            ng-focus="formFocus('wallet-name')"
            ng-blur="formFocus(false)">
        </label>

        <label class="item item-input item-stacked-label">
          <span class="input-label" translate>Your nickname</span>
          <input type="text"
            placeholder="{{'John'|translate}}"
            ng-model="formData.myName"
            ng-required="formData.totalCopayers != 1"
            ng-disabled="formData.totalCopayers == 1"
            ng-focus="formFocus('my-name')"
            ng-blur="formFocus(false)">
        </label>

        <label class="item item-input item-select">
          <div class="input-label" translate>
            Total number of copayers
          </div>
          <select class="m10t" ng-model="formData.totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues"
            ng-change="setTotalCopayers(formData.totalCopayers)">
          </select>
        </label>

        <label class="item item-input item-select">
          <div class="input-label" translate>
            Required number of signatures
          </div>
          <select class="m10t"
            ng-model="formData.requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues"
            ng-disabled="formData.totalCopayers == 1">
          </select>
        </label>

        <ion-toggle ng-model="showAdv" toggle-class="toggle-stable" ng-change="showAdvChange()">
          <span translate ng-show="!showAdv">Show advanced options</span>
          <span translate ng-show="showAdv">Hide advanced options</span>
        </ion-toggle>

        <div ng-show="showAdv">
          <label class="item item-input item-stacked-label">
            <span class="input-label">Wallet Service URL</span>
            <input type="text" ng-model="formData.bwsurl">
          </label>

          <label class="item item-input item-select">
            <div class="input-label" translate>
              Wallet Key
            </div>
            <select class="m10t" ng-model="seedSource" ng-options="seed as seed.label for seed in seedOptions"></select>
          </label>

          <label class="item item-input item-stacked-label" ng-show="seedSource.id == 'trezor' || seedSource.id == 'ledger'">
            <span class="input-label" translate>Account Number</span>
            <input type="number" ng-model="formData.account" ignore-mouse-wheel>
          </label>

          <div class="card" ng-show="seedSource.id =='new' && formData.createPassphrase">
            <div class="item item-text-wrap" translate>
              WARNING: The password cannot be recovered. <b>Be sure to write it down</b>. The wallet can not be restored without the password.
            </div>
          </div>

          <label class="item item-input item-stacked-label" ng-show="seedSource.id == 'new'">
            <span class="input-label" translate>Add a Password</span>
            <input type="text"
            placeholder="{{'Add an optional password to secure the recovery phrase'|translate}}"
            autocapitalize="off"
            ng-model="formData.createPassphrase">
          </label>

          <label class="item item-input item-stacked-label" ng-show="seedSource.id == 'set'">
            <span class="input-label" translate>Wallet Recovery Phrase</span>
            <input placeholder="{{'Enter the recovery phrase (BIP39)'|translate}}"
            autocapitalize="off"
            type="text"
            ng-model="formData.privateKey">
          </label>

          <label class="item item-input item-stacked-label" ng-show="seedSource.id == 'set'">
            <span class="input-label" translate>Password</span>
            <input type="text"
            placeholder="{{'The recovery phrase could require a password to be imported'|translate}}"
            autocapitalize="off"
            ng-model="formData.passphrase">
          </label>

          <label class="item item-input item-stacked-label" ng-show="seedSource.id  == 'set'">
            <span class="input-label" translate>Derivation Path</span>
            <input type="text"
            placeholder="{{'BIP32 path for address derivation'|translate}}"
            ng-model="formData.derivationPath">
          </label>

          <ion-toggle ng-show="seedSource.id == 'new'" ng-model="formData.testnetEnabled" toggle-class="toggle-positive">
            Testnet
          </ion-toggle>

          <ion-toggle ng-model="formData.singleAddressEnabled" toggle-class="toggle-positive">
            <span translate>Single Address Wallet</span>
            <small translate>For audit purposes</small>
          </ion-toggle>

        </div> <!-- advanced -->
      </div> <!-- list -->

      <button type="submit" class="button button-block button-positive" ng-disabled="setupForm.$invalid">
        <span translate>Create {{formData.requiredCopayers}}-of-{{formData.totalCopayers}} wallet</span>
      </button>
    </form>
  </ion-content>
</ion-view>


