mixin renderCommentComposer (formId, options = { })
  form(
    id= formId,
    method="POST",
    action= options.rootUrl,
    onsubmit="return dtp.app.submitForm(event, 'create-comment');",
  ).uk-form

    if options.replyTo
      input(type="hidden", name="replyTo", value= options.replyTo)

    .uk-card.uk-card-default.uk-card-small
      .uk-card-body
        textarea#comment-content(
          name="content",
          rows="4",
          maxlength="3000",
          placeholder="Enter comment",
          data-form-id= formId,
          oninput=`return dtp.app.comments.onCommentInput(event);`,
        ).uk-textarea.uk-resize-vertical
        .uk-text-small
          div(uk-grid).uk-flex-between
            .uk-width-auto You are commenting as: #{user.username}
            .uk-width-auto #[span.comment-character-count 0] of 3,000

      .uk-card-footer
        div(uk-grid).uk-flex-between.uk-grid-small
          .uk-width-expand
            ul.uk-subnav
              li.comment-emoji-picker
                button(
                  type="button",
                  uk-tooltip="Add an emoji",
                ).uk-button.dtp-button-default
                  span
                    i.far.fa-smile
                .comment-emoji-picker-drop(data-form-id= formId, uk-drop={ mode: 'click' })
                  .comment-emoji-picker-ui
                    div THIS IS THE EMOJI PICKER

              li(title="Not Safe For Work will hide your comment text by default")
                label
                  input(id="is-nsfw", name="isNSFW", type="checkbox").uk-checkbox
                  |  NSFW

          if options.showCancel
            .uk-width-auto
              button(type="submit").uk-button.uk-button-secondary.uk-border-rounded Cancel

          .uk-width-auto
            button(type="submit").uk-button.uk-button-primary.uk-border-rounded Post