.panel.panel-default.panel-right.account-data-menu
  .panel-body.large-padding
    %div{"ng-if" => "!user"}

      -# Account Section
      .mb-10

        .step-one{"ng-if" => "!formData.showLogin && !formData.showRegister"}
          %h3 Sign in or register to enable sync and encryption.
          .small-v-space

          .button-group.mt-5
            %button.ui-button.half-button{"ng-click" => "formData.showLogin = true"}
              %span Sign In
            %button.ui-button.half-button{"ng-click" => "formData.showRegister = true"}
              %span Register

        .step-two{"ng-if" => "formData.showLogin || formData.showRegister"}
          .float-group.h20
            %h3.pull-left {{formData.showLogin ? "Sign In" : "Register (free)"}}
            %a.pull-right.pt-5{"ng-click" => "formData.showLogin = false; formData.showRegister = false;"} Cancel

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

            %a.block{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"} Advanced Options
            .advanced-options.mt-10{"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'}

            .checkbox.mt-10{"ng-if" => "localNotesCount() > 0"}
              %p
                %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
                  Merge local notes ({{localNotesCount()}} notes)
            %button.ui-button.block.mt-10{"ng-click" => "submitAuthForm()"} {{formData.showLogin ? "Sign In" : "Register"}}

        .mt-15{"ng-if" => "formData.showRegister"}
          %h3 No Password Reset.
          %p.mt-5 Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password.

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

      -# End account section

    %div{"ng-if" => "user"}
      %h2 {{user.email}}
      %p {{server}}
      %div.bold.mt-10.blue{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
        .spinner.inline.mr-5.blue
        {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}}
        %span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}}
      %p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}}



      %a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password
      %section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"}
        %p.bold Change Password (Beta)
        %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.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit
        %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}}




      %a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
      %div{"ng-if" => "showAdvanced"}
        %a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard
        %a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items
        %a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials
        %section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"}
          %label.block
            Encryption key:
            .wrap.normal.mt-1.selectable {{encryptionKey()}}
          %label.block.mt-5.mb-0
            Server password:
            .wrap.normal.mt-1.selectable {{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}}
          %label.block.mt-5.mb-0
            Authentication key:
            .wrap.normal.mt-1.selectable {{authKey() ? authKey() : 'Not available. Sign out then sign back in to compute.'}}


      %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.blue Processing...





      .medium-v-space

      %h4 Local Encryption
      %p Notes are encrypted locally before being sent to the server. Neither the server owner nor an intrusive entity can decrypt your locally encrypted notes.
      %div.mt-5
        %label Status:
        {{encryptionStatusForNotes()}}

    .mt-25{"ng-if" => "!importData.loading"}
      %h4 Data Archives
      .mt-5{"ng-if" => "user"}
        %label.normal.inline{"ng-if" => "user"}
          %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"}
          Encrypted
        %label.normal.inline
          %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
          Decrypted

      %a.block.mt-5{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} Download Data Archive

      %label.block.mt-5
        %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
        .fake-link Import Data from Archive

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

      %p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted".

    .spinner.mt-10{"ng-if" => "importData.loading"}

    .mt-25
      %h4 Analytics
      %p
        Help Standard Notes improve by sending anonymous data on general usage.
        %a{"href" => "https://standardnotes.org/privacy", "target" => "_blank"} Learn more.
      %div.mt-5
        %label Status:
        {{analyticsManager.enabled ? "Enabled" : "Disabled"}}
        %a{"ng-click" => "analyticsManager.toggleStatus()"} {{analyticsManager.enabled ? "Disable" : "Enable"}}

    %a.block.mt-25.red{"ng-click" => "destroyLocalData()"}  {{ user ? "Sign out and clear local data" : "Clear all local data" }}