{{ define "repo/issues/fragments/newComment" }}
  {{ if .LoggedInUser }}
  <form
    hx-post="/comment"
    hx-trigger="submit, click from:#close-button, keydown[commentButtonEnabled() && (ctrlKey || metaKey) && key=='Enter'] from:#comment-textarea"
    hx-disabled-elt="find button[type='submit']"
    hx-on::after-request="if(event.detail.successful) this.reset()"
    class="group/form"
  >
    <input name="subject-uri" type="hidden" value="{{ .Issue.AtUri }}">
    <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full">
      <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
        {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
      </div>
      <textarea
        id="comment-textarea"
        name="body"
        class="w-full p-2 rounded"
        placeholder="Add to the discussion. Markdown is supported."
        onkeyup="updateCommentForm()"
        rows="5"
        required
      ></textarea>
      <div id="comment-error" class="error"></div>
      <div id="issue-action" class="error"></div>
    </div>

    <div class="flex gap-2 mt-2">
        <button
            id="comment-button"
            type="submit"
            class="btn-create p-2 flex items-center gap-2 no-underline hover:no-underline"
            disabled
        >
            {{ i "message-square-plus" "w-4 h-4 inline group-[.htmx-request]/form:hidden" }}
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/form:inline" }}
            comment
        </button>

        {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }}
        {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
        {{ $isRepoOwner := .RepoInfo.Roles.IsOwner }}
        {{ if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) .Issue.Open }}
        <button
            id="close-button"
            type="button"
            class="btn flex items-center gap-2 group/close"
            hx-trigger="click"
        >
            {{ i "ban" "w-4 h-4 inline group-[.htmx-request]/close:hidden" }}
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]/close:inline" }}
            <span id="close-button-text">close</span>
        </button>
        <div
            id="close-issue"
            hx-disabled-elt="#close-issue"
            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
            hx-trigger="click from:#close-button"
            hx-target="#issue-action"
            hx-swap="none"
            hx-indicator="#close-button"
        >
        </div>
        {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (not .Issue.Open) }}
        <button
            type="button"
            class="btn flex items-center gap-2 group"
            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
            hx-swap="none"
        >
            {{ i "refresh-ccw-dot" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
            reopen
        </button>
        {{ end }}

        <script>
        function commentButtonEnabled() {
            const commentButton = document.getElementById('comment-button');
            return !commentButton.hasAttribute('disabled');
        }

        function updateCommentForm() {
            const textarea = document.getElementById('comment-textarea');
            const commentButton = document.getElementById('comment-button');
            const closeButtonText = document.getElementById('close-button-text');

            if (textarea.value.trim() !== '') {
                commentButton.removeAttribute('disabled');
            } else {
                commentButton.setAttribute('disabled', '');
            }

            if (closeButtonText) {
                if (textarea.value.trim() !== '') {
                  closeButtonText.innerHTML = `close with comment`;
                } else {
                  closeButtonText.innerHTML = `close`;
                }
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            updateCommentForm();
        });
        </script>
    </div>
  </form>
  {{ else }}
    <div class="bg-amber-50 dark:bg-amber-900 border border-amber-500 rounded drop-shadow-sm p-6 relative flex gap-2 items-center">
      <a href="/signup" class="btn-create py-0 hover:no-underline hover:text-white flex items-center gap-2">
        sign up
      </a>
      <span class="text-gray-500 dark:text-gray-400">or</span>
      <a href="/login" class="underline">login</a>
      to add to the discussion
    </div>
  {{ end }}
{{ end }}
