extends ../layout/main
block view-content

  include ../user/components/profile-picture

  section#view-content.uk-section.uk-section-default
    .uk-container

      form(method="POST", action="/auth/password-reset", autocomplete="off", onsubmit="return dtp.app.submitForm(event, 'reset password');").uk-form

        input(type="hidden", name= csrfPasswordReset.name, value= csrfPasswordReset.token)
        input(type="hidden", name= "authToken", value= authToken.token)
        input(type="hidden", name= "accountId", value= account._id)

        .uk-card.uk-card-secondary.uk-card-small
          .uk-card-header
            h1.uk-card-title
              div(uk-grid).uk-grid-medium.uk-flex-middle
                .uk-width-auto.uk-text-success
                  i.fas.fa-key
                .uk-width-expand Password Reset
                if process.env.NODE_ENV === 'local'
                  .uk-width-auto
                    .uk-text-small id: #{account._id}

          .uk-card-body
            .uk-margin
              div(uk-grid)
                div(class="uk-width-1-1 uk-width-auto@m")
                  +renderProfilePicture(account, { iconClass: 'sb-large' })

                div(class="uk-width-1-1 uk-width-expand@m")
                  .uk-margin
                    if account.displayName
                      .uk-text-large.uk-text-bold.uk-text-truncate= account.displayName

                    div(uk-grid).uk-grid-small
                      .uk-width-auto
                        .uk-form-label account
                        div= account.username

                      .uk-width-auto
                        .uk-form-label service
                        div= site.domain.split(':')[0]

                  .uk-margin
                    label(for="password").uk-form-label New password:
                    input(
                      id="password",
                      name="password",
                      type="password",
                      minlength="8",
                      placeholder="Enter new password",
                      required,
                      autocomplete="off",
                    ).uk-input

                  .uk-margin
                    label(for="password-verify").uk-form-label Verify password:
                    input(
                      id="password-verify",
                      name="passwordVerify",
                      type="password",
                      minlength="8",
                      placeholder="Verify new password",
                      required,
                      autocomplete="off",
                    ).uk-input
              
          .uk-card-footer
            .uk-flex.uk-flex-between
              .uk-width-auto
                a(href="/").uk-button.dtp-button-default.uk-border-rounded
                  span
                    i.fas.fa-chevron-left
                  span.uk-margin-small-left Cancel

              .uk-width-auto
                button(type="submit").uk-button.dtp-button-primary.uk-border-rounded Set Password