{{ define "title" }}{{ .Issue.Title }} · issue #{{ .Issue.IssueId }} · {{ .RepoInfo.FullName }}{{ end }}

{{ define "repoContent" }}
    <header class="pb-4">
      <h1 class="text-2xl">
      {{ .Issue.Title }}
      <span class="text-gray-500 dark:text-gray-400">#{{ .Issue.IssueId }}</span>
      </h1>
    </header>

    {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
    {{ $icon := "ban" }}
    {{ if eq .State "open" }}
        {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
        {{ $icon = "circle-dot" }}
    {{ end }}

    <section class="mt-2">
        <div class="inline-flex items-center gap-2">
            <div id="state"
                class="inline-flex items-center rounded px-3 py-1 {{ $bgColor }}">
                {{ i $icon "w-4 h-4 mr-1.5 text-white" }}
                <span class="text-white">{{ .State }}</span>
            </div>
            <span class="text-gray-500 dark:text-gray-400 text-sm">
                opened by
                {{ $owner := didOrHandle .Issue.OwnerDid .IssueOwnerHandle }}
                <a href="/{{ $owner }}" class="no-underline hover:underline"
                    >{{ $owner }}</a
                >
                <span class="px-1 select-none before:content-['\00B7']"></span>
                <time title="{{ .Issue.Created | longTimeFmt }}">
                    {{ .Issue.Created | timeFmt }}
                </time>
            </span>
        </div>

        {{ if .Issue.Body }}
            <article id="body" class="mt-8 prose dark:prose-invert">
                {{ .Issue.Body | markdown }}
            </article>
        {{ end }}
    </section>
{{ end }}

{{ define "repoAfter" }}
    {{ if gt (len .Comments) 0 }}
    <section id="comments" class="mt-8 space-y-4 relative">
        {{ range $index, $comment := .Comments }}
            <div
                id="comment-{{ .CommentId }}"
                class="rounded bg-white px-6 py-4 relative dark:bg-gray-800">
                {{ if eq $index 0 }}
                    <div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
                {{ else }}
                    <div class="absolute left-8 -top-4 w-px h-4 bg-gray-300 dark:bg-gray-700" ></div>
                {{ end }}

                {{ template "fragments/issueComment" (dict "RepoInfo" $.RepoInfo "LoggedInUser" $.LoggedInUser "DidHandleMap" $.DidHandleMap "Issue" $.Issue "Comment" .)}}
            </div>
        {{ end }}
    </section>
    {{ end }}

    {{ block "newComment" . }} {{ end }}

    {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }}
    {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
    {{ if or $isIssueAuthor $isRepoCollaborator }}
        {{ $action := "close" }}
        {{ $icon := "circle-x" }}
        {{ $hoverColor := "red" }}
        {{ if eq .State "closed" }}
            {{ $action = "reopen" }}
            {{ $icon = "circle-dot" }}
            {{ $hoverColor = "green" }}
        {{ end }}
        <form
            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/{{ $action }}"
            hx-swap="none"
            class="mt-8"
        >
            <button type="submit" class="btn hover:bg-{{ $hoverColor }}-300">
                {{ i $icon "w-4 h-4 mr-2" }}
                <span class="text-black dark:text-gray-400">{{ $action }}</span>
            </button>
            <div id="issue-action" class="error"></div>
        </form>
    {{ end }}
{{ end }}

{{ define "newComment" }}
  {{ if .LoggedInUser }}
    <div class="bg-white rounded drop-shadow-sm py-4 px-6 relative w-full flex flex-col gap-2 mt-8 dark:bg-gray-800 dark:text-gray-400">
      <div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
      <div class="text-sm text-gray-500 dark:text-gray-400">
        {{ didOrHandle .LoggedInUser.Did .LoggedInUser.Handle }}
      </div>
      <form hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment">
          <textarea
              name="body"
              class="w-full p-2 rounded border border-gray-200 dark:border-gray-700"
              placeholder="Add to the discussion..."
          ></textarea>
          <button type="submit" class="btn mt-2">comment</button>
          <div id="issue-comment"></div>
      </form>
    </div>
  {{ else }}
    <div class="bg-white dark:bg-gray-800 dark:text-gray-400 rounded drop-shadow-sm px-6 py-4 mt-8">
      <div class="absolute left-8 -top-8 w-px h-8 bg-gray-300 dark:bg-gray-700" ></div>
      <a href="/login" class="underline">login</a> to join the discussion
    </div>
  {{ end }}
{{ end }}