extends ../layout/main
block admin-content

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

  form(method="POST", action=`/admin/user/${userProfile._id}`).uk-form
    .uk-card.uk-card-default.uk-card-small.uk-border-rounded
      .uk-card-header
        div(uk-grid).uk-grid-small
          .uk-width-auto
            +renderProfilePicture(userProfile)

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

      .uk-card-body
        .uk-margin
          label(for="profile-bio").uk-form-label bio
          #profile-bio.markdown-block!= marked.parse(userProfile.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= userProfile.badges.join(',')).uk-input

        .uk-margin
          form(method="POST", action=`/admin/user/${userProfile._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="flags.isAdmin", checked= userProfile.flags.isAdmin)
                      .state.p-success
                        label Admin
                  .uk-width-auto
                    .pretty.p-default
                      input(type="checkbox", name="flags.isModerator", checked= userProfile.flags.isModerator)
                      .state.p-success
                        label Moderator
                  .uk-width-auto
                    .pretty.p-default
                      input(type="checkbox", name="flags.isEmailVerified", checked= userProfile.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="permissions.canLogin", checked= userProfile.permissions.canLogin)
                      .state.p-success
                        label Can Login
                  .uk-width-auto
                    .pretty.p-default
                      input(type="checkbox", name="permissions.canReport", checked= userProfile.permissions.canReport)
                      .state.p-success
                        label Can Report
                  .uk-width-auto
                    .pretty.p-default
                      input(type="checkbox", name="permissions.canShareLinks", checked= userProfile.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= userProfile.optIn.system)
                      .state.p-success
                        label System Messages
                  .uk-width-auto
                    .pretty.p-default
                      input(type="checkbox", name="optIn.marketing", checked= userProfile.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