.sn-component
  #password-wizard.sk-modal.small.auto-height
    .sk-modal-background
    .sk-modal-content
      .sn-component
        .sk-panel
          .sk-panel-header
            .sk-panel-header-title {{ctrl.title}}
            a.sk-a.info.close-button(ng-click='ctrl.dismiss()') Close
          .sk-panel-content
            div(ng-if='ctrl.step == 0')
              div(ng-if='ctrl.changePassword')
                p.sk-p.sk-panel-row
                  | Changing your password involves changing your encryption key, 
                  | which requires your data to be re-encrypted and synced.
                  | If you have many items, syncing your data can take several minutes.
                p.sk-p.sk-panel-row 
                  | You must keep the application window open during this process.
              div(ng-if='ctrl.securityUpdate')
                p.sk-p.sk-panel-row
                  | A new update is available for your account. Updates address 
                  | improvements and enhancements to our security specification.
                  | This process will guide you through the update, and perform the 
                  | steps necessary with your supervision.
                .sk-panel-row
                  .sk-panel-column
                    p.sk-p For more information about security updates, please visit
                    a.sk-a.info(
                      href='https://standardnotes.org/help/security', 
                      rel='noopener', 
                      target='_blank'
                      ) standardnotes.org/help/security.
              p.sk-panel-row.sk-p
              .info Press Continue to proceed.
              p
            .sk-panel-section(ng-if='ctrl.step > 0')
              .sk-panel-section-title Step {{ctrl.step}} — {{ctrl.titleForStep(ctrl.step)}}
              div(ng-if='ctrl.step == 1')
                p.sk-panel-row.sk-p
                  | As a result of this process, the entirety of your data will be 
                  | re-encrypted and synced to your account. This is a generally safe 
                  | process, but unforeseen factors like poor network connectivity or a 
                  | sudden shutdown of your computer may cause this process to fail. It's 
                  | best to be on the safe side before large operations such as this one.
                .sk-panel-row
                .sk-panel-row
                  .sk-button-group
                    .sk-button.info(ng-click='ctrl.downloadBackup(true)')
                      .sk-label Download Encrypted Backup
                    .sk-button.info(ng-click='ctrl.downloadBackup(false)')
                      .sk-label Download Decrypted Backup
              div(ng-if='ctrl.step == 2')
                p.sk-p.sk-panel-row
                  | As a result of this process, your encryption keys will change. Any 
                  | device on which you use Standard Notes will need to end its  session. 
                  | After this process completes, you will be asked to sign back in.
                p.sk-p.bold.sk-panel-row.info-i 
                  | Please sign out of all applications (excluding this one), including:
                ul
                  li.sk-p Desktop
                  li.sk-p Web (Chrome, Firefox, Safari)
                  li.sk-p Mobile (iOS and Android)
                p.sk-p.sk-panel-row
                  | If you do not currently have access to a device you're signed in on, 
                  | you may proceed, but must make signing out and back in the first step 
                  | upon gaining access to that device.
                p.sk-p.sk-panel-row 
                  | Press Continue only when you have 
                  | completed signing out of all your devices.
              div(ng-if='ctrl.step == 3')
                div(ng-if='ctrl.changePassword')
                div(ng-if='ctrl.securityUpdate')
                  p.sk-panel-row
                    | Enter your current password. We'll run this through our encryption 
                    | scheme to generate strong new encryption keys.
                .sk-panel-row
                .sk-panel-row
                  .sk-panel-column.stretch
                    form.sk-panel-form
                      input.sk-input.contrast(
                        ng-model='ctrl.formData.currentPassword', 
                        placeholder='Current Password', 
                        should-focus='true', 
                        sn-autofocus='true', 
                        type='password'
                        )
                      input.sk-input.contrast(
                        ng-if='ctrl.changePassword', 
                        ng-model='ctrl.formData.newPassword', 
                        placeholder='New Password', 
                        type='password'
                        )
                      input.sk-input.contrast(
                        ng-if='ctrl.changePassword', 
                        ng-model='ctrl.formData.newPasswordConfirmation',
                        placeholder='Confirm New Password', 
                        type='password'
                        )
              div(ng-if='ctrl.step == 4')
                p.sk-panel-row
                  | Your data is being re-encrypted with your new 
                  | keys and synced to your account.
                p.sk-panel-row.danger(ng-if='ctrl.lockContinue')
                  | Do not close this window until this process completes.
                .sk-panel-row
                  .sk-panel-column
                    .sk-spinner.small.inline.info.mr-5(ng-if='ctrl.formData.processing')
                    .inline.bold(
                      ng-class="{'info' : !ctrl.formData.statusError, 'error' : ctrl.formData.statusError}"
                      )
                      | {{ctrl.formData.status}}
                  .sk-panel-column(
                    delay='1000', 
                    delay-hide='true', 
                    show='ctrl.syncStatus.syncOpInProgress || ctrl.syncStatus.needsMoreSync'
                    )
                    p.info
                      | Syncing {{ctrl.syncStatus.current}}/{{ctrl.syncStatus.total}}
              div(ng-if='ctrl.step == 5')
                div(ng-if='ctrl.changePassword')
                  p.sk-p.sk-panel-row.info-i Your password has been successfully changed.
                div(ng-if='ctrl.securityUpdate')
                  p.sk-p.sk-panel-row.info-i
                    | The security update has been successfully applied to your account.
                p.sk-p.sk-panel-row
                  | Please ensure you are running the latest version of Standard Notes 
                  | on all platforms to ensure maximum compatibility.
                p.sk-p.sk-panel-row 
                  | You may now sign back in on all your devices and close this window.
          .sk-panel-footer
            .empty
            a.sk-a.info.right(
              ng-class="{'disabled' : ctrl.lockContinue}", 
              ng-click='ctrl.nextStep()', 
              ng-disabled='ctrl.lockContinue')
              .sk-spinner.small.inline.info.mr-5(ng-if='ctrl.showSpinner')
              | {{ctrl.continueTitle}}