extends ./layout.pug

block title
  |General - Account settings | Icy Network

block settings
  h1 General settings
  if message.text
    if message.error
      .alert.alert-danger
        span #{message.text}
    else
      .alert.alert-success
        span #{message.text}
  .row
    .col
      form(method="post")
        div.form-container
          input#csrf(type="hidden", name="csrf", value=csrf)
          label.form-label(for="username") Username
          input.form-control#username(type="text", name="username", placeholder="Username", disabled, value=user.username)
          label.form-label(for="display_name") Display Name
          input.form-control#display_name(type="text", name="display_name", placeholder="Display name", value=user.display_name)
          button.btn.btn-primary(type="submit") Change
    .col
      .user-avatar.row
        .col.user-avatar__picture
          if user.picture
            img#current-avatar(src='/uploads/' + user.picture.file,alt=user.username)
          else
            img#current-avatar(src='/public/image/avatar.png',alt='No avatar')
        .col.user-avatar__options
          .flex-column(data-script="flex")
            button.btn.btn-primary(data-modal-trigger="avatar") Change avatar
            if user.picture
              button.btn.btn-link#remove-avatar Remove avatar
      
          form(method="post", data-noscript, action="/account/avatar", enctype="multipart/form-data")
            div.form-container
              input#csrf(type="hidden", name="csrf", value=csrf)
              label.form-label(for="image") Image
              input.form-control#image(type="file", name="file")
              small.form-hint Must be less than 10 MB and 1:1 aspect ratio. Enable JavaScript to custom crop your image.
              button.btn.btn-primary(type="submit") Change
  .modal#avatar-modal(data-modal="avatar", aria-live="polite", role="modal", style="display: none")
    .modal__content
      .modal__title
        |Change avatar
        .modal__title-button
          button.btn.btn-link(data-modal-closer) x
      .modal__body
        div(data-upload-step="1")
          h2 Upload file
          div.form-container
            input#image-file(type="file", name="file")
            small.form-hint Must be less than 10 MB in size.
        div(data-upload-step="2")
          h2 Crop image
          img#cropper
        div(data-upload-step="3")
          h2 Crop result
          p This is how your profile picture will look like:
          img#crop-result
      .modal__footer
          button.btn.btn-link(data-modal-closer) Cancel
          button.btn.btn-primary#continue(data-upload-step="2") Continue
          button.btn.btn-primary#reset(data-upload-step="3") Reset
          button.btn.btn-primary#upload(data-upload-step="3") Upload