extends ../layout/main
block admin-content

  include ../../user/components/profile-picture

  .uk-card.uk-card-default.uk-card-small.uk-border-rounded
    .uk-card-header
      div(uk-grid).uk-grid-small
        .uk-width-auto
          +renderProfilePicture(userAccount)

        .uk-width-expand
          .uk-margin
            .uk-text-lead= user.displayName
            div(uk-grid).uk-grid-small.uk-grid-divider
              .uk-width-auto @#{user.username}
              .uk-width-auto= user.email
              .uk-width-auto Created #{dayjs(userAccount.created).fromNow()} on #{dayjs(userAccount.created).format('MMMM D, YYYY')}

    .uk-card-body
      .uk-margin
        label(for="profile-bio").uk-form-label bio
        #profile-bio.markdown-block!= marked.parse(userAccount.bio || '(no bio provided)', { renderer: fullMarkdownRenderer })
      
      .uk-margin
        label(for="profile-badges").uk-form-label Profile Badges
        input(id="profile-badges", type= "text", placeholder= "Comma-separated list of badge names", value= userAccount.badges.join(',')).uk-input

      .uk-margin
        form(method="POST", action=`/admin/user/${userAccount._id}`).uk-form
          .uk-margin
            label.uk-form-label Flags
            .uk-margin-small
              div(uk-grid).uk-grid-small
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="isAdmin", checked= userAccount.flags.isAdmin)
                    .state.p-success
                      label Admin
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="isModerator", checked= userAccount.flags.isModerator)
                    .state.p-success
                      label Moderator
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="isEmailVerified", checked= userAccount.flags.isEmailVerified)
                    .state.p-success
                      label Email Verified

          .uk-margin
            label.uk-form-label Permissions
            .uk-margin-small
              div(uk-grid).uk-grid-small
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="canLogin", checked= userAccount.permissions.canLogin)
                    .state.p-success
                      label Can Login
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="canChat", checked= userAccount.permissions.canChat)
                    .state.p-success
                      label Can Chat
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="canReport", checked= userAccount.permissions.canReport)
                    .state.p-success
                      label Can Report
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="canShareLinks", checked= userAccount.permissions.canShareLinks)
                    .state.p-success
                      label Can Share Links

          .uk-margin
            label.uk-form-label Email Opt-In
            .uk-margin-small
              div(uk-grid).uk-grid-small
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="optIn.system", checked= userAccount.optIn.system)
                    .state.p-success
                      label System Messages
                .uk-width-auto
                  .pretty.p-default
                    input(type="checkbox", name="optIn.marketing", checked= userAccount.optIn.marketing)
                    .state.p-success
                      label Marketing

    .uk-card-footer
      div(uk-grid).uk-grid-medium
        .uk-width-auto
          button(type="submit", name="action", value="update").uk-button.uk-button-primary.uk-border-rounded
            span
              i.fa-solid.fa-save
            span.uk-margin-small-left Update User

        .uk-width-auto
          button(type="submit", name="action", value="ban").uk-button.uk-button-danger.uk-border-rounded
            span
              i.fa-solid.fa-cancel
            span.uk-margin-small-left Ban User