extends ../layouts/main
block content

  include ../../comment/components/comment-review

  div(uk-grid).uk-grid-small
    div(class="uk-width-1-1 uk-width-2-3@l")
      form(method="POST", action=`/admin/user/local/${userAccount._id}`).uk-form
        .uk-card.uk-card-default.uk-card-small
          .uk-card-header
            div(uk-grid).uk-grid-small.uk-flex-middle
              if userAccount.picture
                .uk-width-auto
                  +renderProfileIcon(userAccount)
              .uk-width-expand
                .uk-text-large= userAccount.displayName || userAccount.username
                div(uk-grid).uk-grid-small.uk-flex-between
                  .uk-width-auto
                    a(href=`mailto:${userAccount.email}`)= userAccount.email
                  .uk-width-auto
                    a(href=`/user/${userAccount.username}`) @#{userAccount.username}

          .uk-card-body
            .uk-margin
              label(for="username").uk-form-label Username
              input(id="username", name="username", type="text", value= userAccount.username).uk-input

            .uk-margin
              label(for="display-name").uk-form-label Display name
              input(id="display-name", name="displayName", type="text", value= userAccount.displayName).uk-input

            .uk-margin
              label(for="bio").uk-form-label Bio
              textarea(id="bio", name="bio", rows="3", placeholder="Enter profile bio").uk-textarea= userAccount.bio

            .uk-margin
              label.uk-form-label Flags
              div(uk-grid).uk-grid-small
                label
                  input(id="is-admin", name="isAdmin", type="checkbox", checked= userAccount.flags.isAdmin)
                  |  Admin
                label
                  input(id="is-moderator", name="isModerator", type="checkbox", checked= userAccount.flags.isModerator)
                  |  Moderator
                label
                  input(id="is-email-verified", name="isEmailVerified", type="checkbox", checked= userAccount.flags.isEmailVerified)
                  |  Email Verified

            .uk-margin
              label.uk-form-label Permissions
              div(uk-grid).uk-grid-small
                label
                  input(id="can-login", name="canLogin", type="checkbox", checked= userAccount.permissions.canLogin)
                  |  Can Login
                label
                  input(id="can-chat", name="canChat", type="checkbox", checked= userAccount.permissions.canChat)
                  |  Can Chat
                label
                  input(id="can-comment", name="canComment", type="checkbox", checked= userAccount.permissions.canComment)
                  |  Can Comment
                label
                  input(id="can-report", name="canReport", type="checkbox", checked= userAccount.permissions.canReport)
                  |  Can Report

            .uk-margin
              label.uk-form-label Opt-Ins
              div(uk-grid).uk-grid-small
                label
                  input(id="optin-system", name="optInSystem", type="checkbox", checked= userAccount.optIn.system)
                  |  System
                label
                  input(id="optin-marketing", name="optInMarketing", type="checkbox", checked= userAccount.optIn.marketing)
                  |  Marketing

            .uk-margin
              label.uk-form-label Badges
              input(id="badges", name="badges", type="text", placeholder="Enter badges", value= (userAccount.badges || [ ]).join(', ')).uk-input
              .uk-text-small.uk-text-muted Enter badge labels separated by commas

          .uk-card-footer
            div(uk-grid).uk-grid-small
              .uk-width-expand
                +renderBackButton()
              .uk-width-auto
                a(href=`/admin/user/local/${userAccount._id}/archive/confirm`).uk-button.uk-button-danger.uk-border-rounded Archive User
              .uk-width-auto
                button(type="submit", name="action", value="ban").uk-button.uk-button-danger.uk-border-rounded Ban User
              .uk-width-auto
                button(type="submit", name="action", value="update").uk-button.uk-button-primary.uk-border-rounded Update User

    div(class="uk-width-1-1 uk-width-1-3@l")

      .uk-card.uk-card-default.uk-card-small
        .uk-card-header
          h4.uk-card-title Recent Comments
        .uk-card-body
          if Array.isArray(recentComments) && (recentComments.length > 0)
            ul.uk-list.uk-list-divider
              each comment in recentComments
                li
                  +renderCommentReview(comment)
          else
            div #{userAccount.displayName || userAccount.username} has no recent comments.