.sn-component
  #account-panel.sk-panel
    .sk-panel-header
      .sk-panel-header-title Account
      a.sk-a.info.close-button(ng-click='self.close()') Close
    .sk-panel-content
      .sk-panel-section.sk-panel-hero(
        ng-if=`
          !self.state.user &&
          !self.state.formData.showLogin &&
          !self.state.formData.showRegister`
        )
        .sk-panel-row
          .sk-h1 Sign in or register to enable sync and end-to-end encryption.
        .sk-panel-row
          .sk-button-group.stretch
            .sk-button.info.featured(ng-click='self.state.formData.showLogin = true')
              .sk-label Sign In
            .sk-button.info.featured(ng-click='self.showRegister()')
              .sk-label Register
        .sk-panel-row.sk-p
          | Standard Notes is free on every platform, and comes
          | standard with sync and encryption.
      .sk-panel-section(ng-if=`
          self.state.formData.showLogin ||
          self.state.formData.showRegister`
        )
        .sk-panel-section-title
          | {{self.state.formData.showLogin ? "Sign In" : "Register"}}
        form.sk-panel-form(ng-submit='self.submitAuthForm()')
          .sk-panel-section
            input.sk-input.contrast(
              name='email',
              ng-model='self.state.formData.email',
              ng-model-options='{allowInvalid: true}',
              placeholder='Email',
              required='',
              should-focus='true',
              sn-autofocus='true',
              spellcheck='false',
              type='email'
              )
            input.sk-input.contrast(
              name='password',
              ng-model='self.state.formData.user_password',
              placeholder='Password',
              required='',
              sn-enter='self.submitAuthForm()',
              type='password'
              )
            input.sk-input.contrast(
              name='password_conf',
              ng-if='self.state.formData.showRegister',
              ng-model='self.state.formData.password_conf',
              placeholder='Confirm Password',
              required='',
              sn-enter='self.submitAuthForm()',
              type='password'
              )
            .sk-panel-row
            a.sk-panel-row.sk-bold(
              ng-click=`
                self.state.formData.showAdvanced = !self.state.formData.showAdvanced
                `
              )
              | Advanced Options
          .sk-notification.unpadded.contrast.advanced-options.sk-panel-row(
            ng-if='self.state.formData.showAdvanced'
            )
            .sk-panel-column.stretch
              .sk-notification-title.sk-panel-row.padded-row Advanced Options
              .bordered-row.padded-row
                label.sk-label Sync Server Domain
                input.sk-input.sk-base(
                  name='server',
                  ng-model='self.state.formData.url',
                  ng-change='self.onHostInputChange()'
                  placeholder='Server URL',
                  required='',
                  type='text'
                  )
              label.sk-label.padded-row.sk-panel-row.justify-left(
                ng-if='self.state.formData.showLogin'
                )
                .sk-horizontal-group.tight
                  input.sk-input(
                    ng-model='self.state.formData.strictSignin',
                    type='checkbox'
                    )
                  p.sk-p Use strict sign in
                  span
                    a.info(
                      href='https://standardnotes.org/help/security',
                      rel='noopener',
                      target='_blank'
                      ) (Learn more)
          .sk-panel-section.form-submit(ng-if='!self.state.formData.authenticating')
            .sk-button-group.stretch
              .sk-button.info.featured(
                ng-click='self.submitAuthForm()',
                ng-disabled='self.state.formData.authenticating'
                )
                .sk-label {{self.state.formData.showLogin ? "Sign In" : "Register"}}
          .sk-notification.neutral(ng-if='self.state.formData.showRegister')
            .sk-notification-title No Password Reset.
            .sk-notification-text
              | Because your notes are encrypted using your password,
              | Standard Notes does not have a password reset option.
              | You cannot forget your password.
          .sk-panel-section.no-bottom-pad(ng-if='self.state.formData.status')
            .sk-horizontal-group
              .sk-spinner.small.neutral
              .sk-label {{self.state.formData.status}}
          .sk-panel-section.no-bottom-pad(ng-if='!self.state.formData.authenticating')
            label.sk-panel-row.justify-left
              .sk-horizontal-group.tight
                input(
                  ng-false-value='true',
                  ng-model='self.state.formData.ephemeral',
                  ng-true-value='false',
                  type='checkbox'
                  )
                p.sk-p Stay signed in
            label.sk-panel-row.justify-left(ng-if='self.notesAndTagsCount() > 0')
              .sk-horizontal-group.tight
                input(
                  ng-bind='true',
                  ng-change='self.mergeLocalChanged()',
                  ng-model='self.state.formData.mergeLocal',
                  type='checkbox'
                  )
                p.sk-p Merge local data ({{self.notesAndTagsCount()}} notes and tags)
      div(
        ng-if=`
          !self.state.formData.showLogin &&
          !self.state.formData.showRegister`
        )
        .sk-panel-section(ng-if='self.state.user')
          .sk-notification.danger(ng-if='self.state.syncError')
            .sk-notification-title Sync Unreachable
            .sk-notification-text
              | Hmm...we can't seem to sync your account.
              | The reason: {{self.state.syncError}}
            a.sk-a.info-contrast.sk-bold.sk-panel-row(
              href='https://standardnotes.org/help',
              rel='noopener',
              target='_blank'
              ) Need help?
          .sk-panel-row
            .sk-panel-column
              .sk-h1.sk-bold.wrap {{self.state.user.email}}
              .sk-subtitle.neutral {{self.state.server}}
          .sk-panel-row
          a.sk-a.info.sk-panel-row.condensed(
            ng-click="self.openPasswordWizard()"
          ) Change Password
          a.sk-a.info.sk-panel-row.condensed(
            ng-click="self.openSessionsModal()"
          ) Manage Sessions
        .sk-panel-section
          .sk-panel-section-title Encryption
          .sk-panel-section-subtitle.info(ng-if='self.state.encryptionEnabled')
            | {{self.encryptionStatusForNotes()}}
          p.sk-p
            | {{self.state.encryptionStatusString}}
        .sk-panel-section(ng-if="self.hasProtections()")
          .sk-panel-section-title Protections
          .sk-panel-section-subtitle.info(ng-if="self.state.protectionsDisabledUntil")
            | Protections are disabled until {{self.state.protectionsDisabledUntil}}
          .sk-panel-section-subtitle.info(ng-if="!self.state.protectionsDisabledUntil")
            | Protections are enabled
          p.sk-p
            | Actions like viewing protected notes, exporting decrypted backups,
            | or revoking an active session, require additional authentication
            | like entering your account password or application passcode.
          .sk-panel-row(ng-if="self.state.protectionsDisabledUntil")
            button.sk-button.info(ng-click="self.enableProtections()")
              span.sk-label.capitalize Enable protections
        .sk-panel-section
          .sk-panel-section-title Passcode Lock
          div(ng-if='!self.state.hasPasscode')
            div(ng-if='self.state.canAddPasscode')
              .sk-panel-row(ng-if='!self.state.formData.showPasscodeForm')
                .sk-button.info(
                  ng-click='self.addPasscodeClicked(); $event.stopPropagation();'
                  )
                  .sk-label Add Passcode
              p.sk-p
                | Add a passcode to lock the application and
                | encrypt on-device key storage.
              p(ng-if='self.state.keyStorageInfo')
                | {{self.state.keyStorageInfo}}
            div(ng-if='!self.state.canAddPasscode')
              p.sk-p
                | Adding a passcode is not supported in temporary sessions. Please sign
                | out, then sign back in with the "Stay signed in" option checked.
          form.sk-panel-form(
            ng-if='self.state.formData.showPasscodeForm',
            ng-submit='self.submitPasscodeForm()'
            )
            .sk-panel-row
            input.sk-input.contrast(
              ng-model='self.state.formData.passcode',
              placeholder='Passcode',
              should-focus='true',
              sn-autofocus='true',
              type='password'
              )
            input.sk-input.contrast(
              ng-model='self.state.formData.confirmPasscode',
              placeholder='Confirm Passcode',
              type='password'
              )
            .sk-button-group.stretch.sk-panel-row.form-submit
              button.sk-button.info(type='submit')
                .sk-label Set Passcode
            a.neutral.sk-a.sk-panel-row(
              ng-click='self.state.formData.showPasscodeForm = false'
              ) Cancel
          div(ng-if='self.state.hasPasscode && !self.state.formData.showPasscodeForm')
            .sk-panel-section-subtitle.info Passcode lock is enabled
            .sk-notification.contrast
              .sk-notification-title Options
              .sk-notification-text
                .sk-panel-row
                  .sk-horizontal-group
                    .sk-h4.sk-bold Autolock
                    a.sk-a.info(
                      ng-class=`{
                        'boxed' : option.value == self.state.selectedAutoLockInterval
                        }`,
                      ng-click='self.selectAutoLockInterval(option.value)',
                      ng-repeat='option in self.state.passcodeAutoLockOptions'
                      )
                      | {{option.label}}
                .sk-p The autolock timer begins when the window or tab loses focus.
                .sk-panel-row
                a.sk-a.info.sk-panel-row.condensed(
                  ng-click='self.changePasscodePressed()'
                  ) Change Passcode
                a.sk-a.danger.sk-panel-row.condensed(
                  ng-click='self.removePasscodePressed()'
                  ) Remove Passcode
        .sk-panel-section(ng-if='!self.state.importData.loading')
          .sk-panel-section-title Data Backups
          .sk-p
            | Download a backup of all your data.
          .sk-panel-row
          form.sk-panel-form.sk-panel-row(ng-if='self.state.encryptionEnabled')
            .sk-input-group
              label.sk-horizontal-group.tight
                input(
                  ng-change='self.state.mutable.backupEncrypted = true',
                  ng-model='self.state.mutable.backupEncrypted',
                  ng-value='true',
                  type='radio'
                  )
                p.sk-p Encrypted
              label.sk-horizontal-group.tight
                input(
                  ng-change='self.state.mutable.backupEncrypted = false',
                  ng-model='self.state.mutable.backupEncrypted',
                  ng-value='false',
                  type='radio'
                  )
                p.sk-p Decrypted
          .sk-panel-row
          .sk-button-group.sk-panel-row.justify-left
            .sk-button.info(ng-click='self.downloadDataArchive()')
              .sk-label Download Backup
            label.sk-button.info
              input(
                file-change='->',
                handler='self.importFileSelected(files)',
                style='display: none;',
                type='file'
                )
              .sk-label Import Backup
          span(ng-if='self.isDesktopApplication()')
            | Backups are automatically created on desktop and can be managed
            | via the "Backups" top-level menu.
          .sk-panel-row
            .sk-spinner.small.info(ng-if='self.state.importData.loading')
        .sk-panel-section
          .sk-panel-section-title Error Reporting
          .sk-panel-section-subtitle.info
            | Automatic error reporting is {{ self.state.errorReportingEnabled ? 'enabled' : 'disabled' }}
          p.sk-p
            | Help us improve Standard Notes by automatically submitting
            | anonymized error reports.
          p.sk-p.selectable(ng-if="self.state.errorReportingId")
            | Your random identifier is
            strong  {{ self.state.errorReportingId }}
          p.sk-p(ng-if="self.state.errorReportingId")
            | Disabling error reporting will remove that identifier from your
            | local storage, and a new identifier will be created should you
            | decide to enable error reporting again in the future.
          .sk-panel-row
            button(ng-click="self.toggleErrorReportingEnabled()").sk-button.info
              span.sk-label {{ self.state.errorReportingEnabled ? 'Disable' : 'Enable'}} Error Reporting
          .sk-panel-row
            a(ng-click="self.openErrorReportingDialog()").sk-a What data is being sent?
    .sk-panel-footer
      .sk-panel-row
        .sk-p.left.neutral
          span {{self.state.appVersion}}
          span(ng-if="self.state.showBetaWarning")
            span  (
            a.sk-a(ng-click="self.appState.disableBetaWarning()") Hide beta warning
            span )
        a.sk-a.right(
          ng-click='self.hidePasswordForm()',
          ng-if='self.state.formData.showLogin || self.state.formData.showRegister'
          )
          | Cancel
        a.sk-a.right.danger(
          ng-click='self.destroyLocalData()',
          ng-if=`
              !self.state.formData.showLogin &&
              !self.state.formData.showRegister`
            )
          | {{ self.state.user ? "Sign out" : "Clear session data" }}