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-container
      h1 Settings
      
      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;
            }
          +renderFileUploadImage(`/user/${user._id}/profile-photo`, 'test-image-upload', 'profile-picture-file', 'site-profile-picture', `/img/default-member.png`, currentImage)
        div(class="uk-width-1-1 uk-width-expand@m")
          form(method="POST", action=`/user/${user._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= user.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= user.displayName).uk-input
            .uk-margin
              button(type="submit").uk-button.dtp-button-primary Update account settings