extends ../layout/main
block vendorcss
  link(rel='stylesheet', href=`/cropperjs/cropper.min.css?v=${pkg.version}`)
block vendorjs
  script(src=`/cropperjs/cropper.min.js?v=${pkg.version}`)
block view-content

  include ../components/file-upload-image

  section.uk-section.uk-section-default
    .uk-container
      div(uk-grid)
        div(class="uk-width-1-1 uk-width-1-3@m")
          -
            var currentImage = null;
            if (user.picture && user.picture.large) {
              currentImage = user.picture.large;
            }

          .uk-margin
            +renderFileUploadImage(
              `/user/${user._id}/profile-photo`,
              'profile-picture-upload',
              'profile-picture-file',
              'streamray-profile-picture',
              `/img/default-member.svg`,
              currentImage,
              { aspectRatio: 1 },
            )
          
          .uk-margin.uk-text-center
            if hasOtpAccount
              a(href=`/user/${user._id}/otp-disable`).uk-button.uk-button-danger.uk-border-rounded Disable 2FA
            else
              a(href=`/user/${user._id}/otp-setup`).uk-button.uk-button-secondary.uk-border-rounded Enable 2FA
          
        div(class="uk-width-1-1 uk-width-expand@m")
          form(
            method="POST",
            action=`/user/${user._id}/settings`,
            autocomplete= "off",
            onsubmit="return dtp.app.submitForm(event, 'user account update');",
          ).uk-form
            input(type="hidden", name= csrfTokenAccountSettings.name, value= csrfTokenAccountSettings.token)

            ul(uk-tab, uk-switcher={ connect: '#account-settings-tabs'})
              li
                a(href) Profile
              li
                a(href) Password
              li
                a(href) Email
              if user.flags && user.flags.isModerator
                li
                  a(href) Moderator

            ul#account-settings-tabs.uk-switcher
              li
                .uk-margin
                  label(for="username").uk-form-label Username
                  input(id="username", name="username", type="text", placeholder="Enter username", value= userProfile.username).uk-input
                .uk-margin
                  label(for="display-name").uk-form-label Display Name
                  input(id="display-name", name="displayName", type="text", placeholder="Enter display name", value= userProfile.displayName).uk-input
                .uk-margin
                  label(for="bio").uk-form-label Bio
                  textarea(id="bio", name="bio", rows="4", placeholder="Enter profile bio").uk-textarea.uk-resize-vertical= userProfile.bio
                .uk-margin
                  label(for="ui-theme").uk-form-label UI Theme
                  select(id="ui-theme", name="uiTheme").uk-select
                    option(value="dtp-light", selected= (user.ui.theme === 'dtp-light')) Light
                    option(value="dtp-dark", selected= (user.ui.theme === 'dtp-dark')) Dark

              li
                .uk-margin
                  div(uk-grid).uk-grid-small
                    .uk-width-1-2
                      .uk-margin
                        label(for="password").uk-form-label New Password
                        input(id="password", name="password", type="password", placeholder="Enter new password", autocomplete= "new-password").uk-input
                    .uk-width-1-2
                      .uk-margin
                        label(for="passwordv").uk-form-label Verify New Password
                        input(id="passwordv", name="passwordv", type="password", placeholder="Enter new password again", autocomplete= "new-password").uk-input

              li
                .uk-margin
                  label(for="email").uk-form-label
                    span Email Address
                    if user.flags.isEmailVerified
                      span  (verified)
                  div(uk-grid).uk-grid-small
                    div(class="uk-width-1-1 uk-width-expand@s")
                      .uk-margin-small
                        input(id="email", name="email", type="email", placeholder="Enter email address", value= userProfile.email).uk-input
                      if user.flags.isEmailVerified
                        .uk-text-small.uk-text-muted Changing your email address will un-verify you and send a new verification email. Check your spam folder!
                      else
                        .uk-text-small.uk-text-muted Changing your email address will send a new verification email. Check your spam folder!
                    div(class="uk-width-1-1 uk-width-auto@s")
                      button(type="button", onclick="return dtp.app.resendWelcomeEmail(event);").uk-button.uk-button-secondary.uk-border-rounded Resend Welcome Email

                .uk-margin
                  div(uk-grid).uk-grid-small
                    .uk-width-auto
                      .pretty.p-switch.p-slim
                        input(id="optin-system", name="optIn.system", type="checkbox", checked= userProfile.optIn ? userProfile.optIn.system : false)
                        .state.p-success
                          label(for="optin-system") System Messages
                    .uk-width-auto
                      .pretty.p-switch.p-slim
                        input(id="optin-marketing", name="optIn.marketing", type="checkbox", checked= userProfile.optIn ? userProfile.optIn.marketing : false)
                        .state.p-success
                          label(for="optin-marketing") Newsletter
                    .uk-width-auto
                      .pretty.p-switch.p-slim
                        input(id="email-verified", type="checkbox", checked= userProfile.flags ? userProfile.flags.isEmailVerified : false, disabled)
                        .state.p-success
                          label(for="email-verified") Email Verified

              if user.flags && user.flags.isModerator
                li
                  .uk-margin
                    .pretty.p-switch.p-slim
                      input(id="moderator-cloaked", name="flags.isCloaked", type="checkbox", checked= userProfile.flags ? userProfile.flags.isCloaked : false)
                      .state.p-success
                        label(for="moderator-cloaked") Enable Ghost Mode

            .uk-margin
              button(type="submit").uk-button.uk-button-primary.uk-border-rounded Update account settings

block viewjs
  script.
    window.addEventListener('dtp-load', async ( ) => {
      window.dtp.app.initSettingsView();
    });