mixin renderCommentComposer (actionUrl, options = { })
  form(method="POST", action= actionUrl, 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-secondary.uk-card-small
      .uk-card-body
        textarea(
          id="content",
          name="content",
          rows="4",
          maxlength="3000",
          placeholder="Enter comment",
          oninput="return dtp.app.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
                button(
                  type="button",
                  data-target-element="content",
                  title="Add an emoji",
                  onclick="return dtp.app.showEmojiPicker(event);",
                ).uk-button.dtp-button-default
                  span
                    i.far.fa-smile
              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.dtp-button-secondary Cancel
          .uk-width-auto
            button(type="submit").uk-button.dtp-button-primary Post