<ion-view id="wallet-backup-phrase">
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>
      {{viewTitle}}
    </ion-nav-title>
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-content>
    <div class="ng-hide" ng-show="deleted">
      <div class="row text-center">
        <h3 translate class="col col-75 center-block">Wallet recovery phrase not available.</h3>
      </div>
      <div class="row text-center">
        <p translate class="col col-75 center-block">
          You can still export it from Advanced &gt; Export.
        </p>
      </div>
    </div>
        <!--
    ## STEP 1
  -->
  <div class="ng-hide" ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
    <div class="backup-phrase" ng-class="{'enable_text_select': wallet.network == 'testnet'}">
      <span ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">&#x3000;</span> </span>
    </div>
    <div class="row text-center">
      <p class="col col-70" translate>
        Please carefully write down this phrase
      </p>
    </div>
    <div class="row text-center" ng-show="mnemonicHasPassphrase">
      <p class="bold-text col col-80 center-block">
        <span translate>
          This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
        </span>
      </p>
    </div>
    <div class="cta-buttons">
      <button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-block button-positive" ng-click="goToStep(2);" translate>I've written it down
      </button>
    </div>
  </div>
        <!--
      ## STEP 2
    -->
    <div class="ng-hide" ng-show="step == 2">
      <div class="backup-phrase">
        <span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
        <button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
        </span>
      </div>
      <div id="select-phrase">
        <p translate>
          Please tap each word in the correct order.
        </p>
        <span ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
          <button class="button select-word" ng-click="addButton($index, shuffledWord)"
          ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
        </button>
      </span>
      <button ng-show="selectComplete" id="confirm-phrase" class="button button-block button-positive" ng-click="goToStep(3);" translate>Confirm</button>
    </div>
  </div>
        <!--
      ## STEP 3
    -->
    <div class="ng-hide" ng-show="step == 3">
      <h5 translate>Enter your password</h5>
      <label class="item item-input item-stacked-label">
        <span class="input-label" transalate>In order to verify your wallet backup, please type your password:</span>
        <input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
      </label>
      <button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
      </button>
    </div>
  </ion-content>
</ion-view>
