.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 {{title}}
            a.sk-a.info.close-button(ng-click='dismiss()') Close
          .sk-panel-content
            div(ng-if='step == 0')
              div(ng-if='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='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='step > 0')
              .sk-panel-section-title Step {{step}} — {{titleForStep(step)}}
              div(ng-if='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='downloadBackup(true)')
                      .sk-label Download Encrypted Backup
                    .sk-button.info(ng-click='downloadBackup(false)')
                      .sk-label Download Decrypted Backup
              div(ng-if='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='step == 3')
                div(ng-if='changePassword')
                div(ng-if='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='formData.currentPassword', placeholder='Current Password', should-focus='true', sn-autofocus='true', type='password')
                      input.sk-input.contrast(ng-if='changePassword', ng-model='formData.newPassword', placeholder='New Password', type='password')
                      input.sk-input.contrast(ng-if='changePassword', ng-model='formData.newPasswordConfirmation', placeholder='Confirm New Password', type='password')
              div(ng-if='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='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='formData.processing')
                    .inline.bold(ng-class="{'info' : !formData.statusError, 'error' : formData.statusError}")
                      | {{formData.status}}
                  .sk-panel-column(delay='1000', delay-hide='true', show='syncStatus.syncOpInProgress || syncStatus.needsMoreSync')
                    p.info
                      | Syncing {{syncStatus.current}}/{{syncStatus.total}}
              div(ng-if='step == 5')
                div(ng-if='changePassword')
                  p.sk-p.sk-panel-row.info-i Your password has been successfully changed.
                div(ng-if='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' : lockContinue}", ng-click='continue()', ng-disabled='lockContinue')
              .sk-spinner.small.inline.info.mr-5(ng-if='showSpinner')
              | {{continueTitle}}