.sn-component
  .panel#account-panel
    .header
      %h1.title Account
      %a.close-button Close
    .content

      .panel-section.hero{"ng-if" => "!user && !formData.showLogin && !formData.showRegister && !formData.mfa"}
        %h1.title Sign in or register to enable sync and end-to-end encryption.
        .button-group.stretch
          .button.info.featured{"ng-click" => "formData.showLogin = true"}
            .label Sign In
          .button.info.featured{"ng-click" => "formData.showRegister = true"}
            .label Register
        %p
          Standard Notes is free on every platform, and comes standard with sync and encryption.

      .panel-section{"ng-if" => "formData.showLogin || formData.showRegister"}
        %h3.title
          {{formData.showLogin ? "Sign In" : "Register (free)"}}

        %form.panel-form
          %input{:placeholder => 'Email', :autofocus => 'autofocus', :name => 'email', :required => true, :type => 'email', 'ng-model' => 'formData.email'}
          %input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'}
          %input{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'}

          %a.panel-row{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"}
            Advanced Options
          .notification.info{"ng-if" => "formData.showRegister"}
            %h2.title No Password Reset.
            .text Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password.
          .advanced-options.panel-row{"ng-if" => "formData.showAdvanced"}
            .float-group
              %label.pull-left Sync Server Domain
            %input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'}

          .button-group.stretch.panel-row.form-submit
            .button.info.featured{"ng-click" => "submitAuthForm()"}
              {{formData.showLogin ? "Sign In" : "Register"}}

          %label
            %input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"}
            Stay signed in
          %label
            %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
            Merge local data ({{notesAndTagsCount()}} notes and tags)

        %form.mt-5{"ng-if" => "formData.mfa"}
          %p {{formData.mfa.message}}
          %input.form-control.mt-10{:autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'}
          %button.ui-button.block.mt-10{"ng-click" => "submitMfaForm()"} {{"Sign In"}}

        %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"}
        {{formData.status}}

      %div{"ng-if" => "!formData.showLogin && !formData.showRegister"}
        .panel-section{"ng-if" => "user"}
          .panel-row
            %h2.title.wrap {{user.email}}
            .horizontal-group{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
              .spinner.small.info
              .sublabel
                {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}}
                %span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}}

          .subtitle.danger.panel-row{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}}

          .subtitle.subtle.panel-row {{server}}


          %a.panel-row.condensed{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
          .notification.default{"ng-if" => "newPasswordData.changePassword"}
            %h1.title Change Password (Beta)
            .text
              %p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.
              %p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process.
              %p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account.
              %p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding.
            %div.mt-10{"ng-if" => "!newPasswordData.status"}
              %a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue
              %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel
              %div.mt-10{"ng-if" => "newPasswordData.showForm"}
                %form
                  %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"}
                  %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"}
                  .button-group.stretch.panel-row.form-submit
                    .button.info{"type" => "submit", "ng-click" => "submitPasswordChange()"}
                      .label Submit
            %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}}



          %a.panel-row.condensed{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
          %div{"ng-if" => "showAdvanced"}
            %a.panel-row{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard
            %a.panel-row{"ng-click" => "reencryptPressed()"} Re-encrypt All Items


          %div{"ng-if" => "securityUpdateAvailable()"}
            %a.block.mt-5{"ng-click" => "clickedSecurityUpdate()"} Security Update Available
            %section.gray-bg.mt-10.medium-padding{"ng-if" => "securityUpdateData.showForm"}
              %p
                %a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more.
              %div.mt-10{"ng-if" => "!securityUpdateData.processing"}
                %p.bold Enter your password to update:
                %form.mt-5
                  %input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"}
                  %button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update
              %div.mt-5{"ng-if" => "securityUpdateData.processing"}
                %p.tinted Processing...


        .panel-section
          %h3.title.panel-row Encryption
          %h5.subtitle.info.panel-row{"ng-if" => "encryptionEnabled()"}
            {{encryptionStatusForNotes()}}
          %p
            {{encryptionStatusString()}}

        .panel-section
          %h3.title.panel-row Passcode Lock
          %div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"}
            .panel-row
              .button.info{"ng-click" => "addPasscodeClicked(); $event.stopPropagation();", "ng-if" => "!formData.showPasscodeForm"}
                .label Add Passcode

            .panel-row
              %p Add an app passcode to lock the app and encrypt on-device key storage.

            %form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"}
              %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"}
              %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"}
              .button-group.stretch.panel-row.form-submit
                .button.info{"type" => "submit"}
                  .label Set Passcode
              %a.panel-row{"ng-click" => "formData.showPasscodeForm = false"} Cancel
          .panel-row{"ng-if" => "hasPasscode()"}
            %p
              Passcode lock is enabled.
              %span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit.
            %a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode
          .panel-row{"ng-if" => "!passcodeOptionAvailable()"}
            %p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.)



        .panel-section{"ng-if" => "!importData.loading"}
          %h3.title Data Backups
          %form.panel-form{"ng-if" => "encryptedBackupsAvailable()"}
            .input-group
              %label
                %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
                Encrypted
              %label
                %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
                Decrypted

          .button-group
            .button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"}
              .label Download Backup

            %label.button.info
              %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
              .label Import From Backup

          %div{"ng-if" => "importData.requestPassword"}
            %form.panel-form{"ng-submit" => "submitImportPassword()"}
              %p Enter the account password associated with the import file.
              %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"}
              %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import

        .spinner.mt-10{"ng-if" => "importData.loading"}
    .footer
      %a.right{"ng-if" => "formData.showLogin || formData.showRegister", "ng-click" => "formData.showLogin = false; formData.showRegister = false;"}
        Cancel
      %a.right{"ng-if" => "!formData.showLogin && !formData.showRegister", "ng-click" => "destroyLocalData()"}
        {{ user ? "Sign out and clear local data" : "Clear all local data" }}