{{ define "repo/pulls/fragments/pullNewComment" }}
<div class="w-full flex flex-col gap-2">
  {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
  <form
    class="w-full flex flex-wrap gap-2 group"
    hx-post="/comment"
    hx-trigger="submit, keydown[(ctrlKey || metaKey) && key=='Enter'] from:find textarea"
    hx-target="#pull-comments-{{ .RoundNumber }}"
    hx-swap="beforeend"
    hx-disabled-elt="find button[type='submit']"
    hx-on::before-request="this.querySelector('.error').innerHTML = ''"
    hx-on::after-request="if(event.detail.successful) this.reset()"
  >
    <input name="subject-uri" type="hidden" value="{{ .Pull.AtUri }}">
    <input name="pull-round-idx" type="hidden" value="{{ .RoundNumber }}">
    <textarea
      id="comment-textarea"
      name="body"
      class="w-full p-2 rounded border"
      rows=8
      placeholder="Add to the discussion..."></textarea
    >
    {{ template "replyActions" . }}
    <div id="comment-error-{{ .RoundNumber }}" class="error"></div>
  </form>
</div>
{{ end }}

{{ define "replyActions" }}
  <div class="flex flex-wrap items-stretch justify-end gap-2 text-gray-500 dark:text-gray-400 text-sm w-full">
    {{ template "cancel" . }}
    {{ template "reply" . }}
  </div>
{{ end }}

{{ define "cancel" }}
  <button
    type="button"
    class="btn-flat text-red-500 dark:text-red-400 flex gap-2 items-center group"
    hx-get="/{{ .RepoInfo.FullName }}/pulls/{{ .Pull.PullId }}/round/{{ .RoundNumber }}/actions"
    hx-swap="outerHTML"
    hx-target="#actions-{{.RoundNumber}}"
  >
    {{ i "x" "w-4 h-4" }}
    <span>Cancel</span>
  </button>
{{ end }}

{{ define "reply" }}
  <button
    type="submit"
    class="btn-create-flat flex items-center gap-2">
      {{ i "reply" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
      Reply
  </button>
{{ end }}
