extends ../layouts/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 content

  include ../components/file-upload-image

  section.uk-section.uk-section-default.uk-section-small
    .uk-container
      div(uk-grid)
        div(class="uk-width-1-1 uk-width-1-3@m")
          -
            var currentProfile = null;
            if (userProfile.picture && userProfile.picture.large) {
              currentProfile = userProfile.picture.large;
            }
          if user.type === 'User'
            .uk-margin
              .uk-card.uk-card-default.uk-card-small
                .uk-card-header.uk-text-center
                  h1.uk-card-title Profile Photo
                .uk-card-body
                  +renderFileUploadImage(
                    `/user/${userProfile._id}/profile-photo`,
                    'profile-picture-upload',
                    'profile-picture-file',
                    'site-profile-picture',
                    `/img/default-member.png`,
                    currentProfile,
                    { aspectRatio: 1 },
                  )

          .uk-margin
            .uk-card.uk-card-default.uk-card-small
              .uk-card-header.uk-text-center
                h1.uk-card-title Two-Factor Authentication
              .uk-card-body
                p Enabling Two-Factor Authentication (2FA) with a One-Time Password authenticator app can help protect your account and settings from unauthorized access.
              .uk-card-footer.uk-text-center
                if hasOtpAccount
                  a(href=`/user/${userProfile._id}/otp-disable`).uk-button.dtp-button-danger Disable 2FA
                else
                  a(href=`/user/${userProfile._id}/otp-setup`).uk-button.dtp-button-default Enable 2FA

        div(class="uk-width-1-1 uk-width-expand@m")
          h1 Settings
          form(method="POST", action=`/user/${userProfile._id}/settings`, onsubmit="return dtp.app.submitForm(event, 'user account update');").uk-form
            .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 bio info").uk-textarea= userProfile.bio

            fieldset
              legend Security

              .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

            fieldset
              legend Email Preferences

              .uk-margin
                label(for="email").uk-form-label
                  span Email Address
                  if userProfile.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 userProfile.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.dtp-button-default Resend Welcome Email

              .uk-margin
                div(uk-grid).uk-grid-small
                  label
                    input(id="optin-system", name="optIn.system", type="checkbox", checked= userProfile.optIn ? userProfile.optIn.system : false).uk-checkbox
                    |  System messages
                  label
                    input(id="optin-marketing", name="optIn.marketing", type="checkbox", checked= userProfile.optIn ? userProfile.optIn.marketing : false).uk-checkbox
                    |  Sales / Marketing

            .uk-margin
              label(for="theme").uk-form-label UI Theme
              select(id="theme", name="theme").uk-select
                option(value="dtp-light", selected= user ? userProfile.theme === 'dtp-light' : true) Light Mode
                option(value="dtp-dark", selected= user ? userProfile.theme === 'dtp-dark' : false) Dark Mode

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