{{ define "repo/issues/fragments/editIssueComment" }}
  <div id="comment-body-{{.Comment.Id}}" class="pt-2">
    <textarea
      id="edit-textarea-{{ .Comment.Id }}"
      name="body"
      class="w-full p-2 rounded border border-gray-200 dark:border-gray-700"
      rows="5"
      autofocus>{{ .Comment.Body }}</textarea>

    {{ template "editActions" $ }}
  </div>
{{ end }}

{{ define "editActions" }}
  <div class="flex flex-wrap items-center justify-end gap-2 text-gray-500 dark:text-gray-400 text-sm pt-2">
    {{ template "cancel" . }}
    {{ template "save" . }}
  </div>
{{ end }}

{{ define "save" }}
  <button
    class="btn-create py-0 flex gap-1 items-center group text-sm"
    hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment/{{ .Comment.Id }}/edit"
    hx-include="#edit-textarea-{{ .Comment.Id }}"
    hx-target="#comment-body-{{ .Comment.Id }}"
    hx-swap="outerHTML">
    {{ i "check" "size-4" }}
    save
    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
  </button>
{{ end }}

{{ define "cancel" }}
  <button
    class="btn py-0 text-red-500 dark:text-red-400 flex gap-1 items-center group"
    hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment/{{ .Comment.Id }}/"
    hx-target="#comment-body-{{ .Comment.Id }}"
    hx-swap="outerHTML">
    {{ i "x" "size-4" }}
    cancel
  </button>
{{ end }}