<ion-view id="wallet-backup-phrase" hide-tabs>
  <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="phrase-unavailable" translate>Wallet recovery phrase not available.</div>
        <div class="phrase-unavailable-instructions" translate>You can still export it from Advanced &gt; Export.</div>
    </div>
    <!--
      ## STEP 1
    -->
    <div id="wallet-backup-phrase-step-1" class="ng-hide" ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
      <div class="initial-prompt" translate>Please carefully write down this phrase.</div>
      <div class="backup-phrase" copy-to-clipboard="copyRecoveryPhrase()">
        <div class="backup-phrase-content">
          <span class="backup-phrase-content-word-readonly" ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">&#x3000;</span> </span>
        </div>
      </div>
      <div class="password-required" ng-show="mnemonicHasPassphrase" translate>
        This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
      </div>
      <div class="cta-buttons">
        <div class="tldr-prompt" translate>We'll confirm on the next screen.</div>
        <button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-standard button-primary" ng-click="goToStep(2);" translate>I've written it down</button>
      </div>
    </div>
    <!--
      ## STEP 2
    -->
    <div id="wallet-backup-phrase-step-2" class="ng-hide" ng-show="step == 2">
      <div class="confirmation-prompt" translate>Let's verify your backup phrase.</div>
      <div class="backup-phrase">
        <div class="backup-phrase-content">
          <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>
      <div id="select-phrase" class="cta-buttons">
        <div id="select-phrase-content">
          <div ng-show="!selectComplete" class="tldr-prompt" translate>Please tap each word in the correct order.</div>
          <div ng-show="selectComplete" class="tldr-prompt" translate>Is this correct?</div>
          <span ng-show="!selectComplete" 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" class="button button-standard button-primary" ng-click="goToStep(3);" translate>Confirm</button>
          <button ng-show="selectComplete" class="button button-standard button-secondary button-clear" ng-click="setFlow(2);" translate>Clear</button>
        </div>
      </div>
    </div>
    <!--
      ## STEP 3
    -->
    <div id="wallet-backup-phrase-step-3" class="ng-hide" ng-show="step == 3">
      <h3 translate>Enter your password</h3>
      <div class="password-prompt">
        <div class="explanation">
          <div class="description" translate>In order to verify your wallet backup, please type your password.</div>
          <div class="input">
            <input type="password" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
          </div>
        </div>
      </div>
      <div class="button-confirm">
        <button ng-disabled="!data.passphrase" class="button button-standard button-primary" ng-click="goToStep(4);" translate>Confirm</button>
      </div>
    </div>
  </ion-content>
</ion-view>
