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


{{ define "extrameta" }}
  {{ template "repo/issues/fragments/og" (dict "RepoInfo" .RepoInfo "Issue" .Issue) }}
{{ end }}

{{ define "repoContentLayout" }}
  <div class="grid grid-cols-1 md:grid-cols-10 gap-4 w-full">
    <div class="col-span-1 md:col-span-8">
      <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
        {{ block "repoContent" . }}{{ end }}
      </section>
      {{ block "repoAfter" . }}{{ end }}
    </div>
    <div class="col-span-1 md:col-span-2 flex flex-col gap-6">
      {{ template "repo/fragments/labelPanel"
        (dict "RepoInfo" $.RepoInfo
              "Defs" $.LabelDefs
              "Subject" $.Issue.AtUri
              "State" $.Issue.Labels) }}
      {{ template "repo/fragments/participants" $.Issue.Participants }}
      {{ template "repo/fragments/backlinks"
        (dict "RepoInfo" $.RepoInfo
              "Backlinks" $.Backlinks) }}
      {{ template "repo/fragments/externalLinkPanel" $.Issue.AtUri }}
    </div>
  </div>
{{ end }}

{{ define "repoContent" }}
<section id="issue-{{ .Issue.IssueId }}">
  {{ template "issueHeader" .Issue }}
  {{ template "issueInfo" . }}
  {{ if .Issue.Body }}
    <article id="body" class="mt-4 prose dark:prose-invert">{{ .Issue.Body | markdown }}</article>
  {{ end }}
  <div class="mt-4">
    {{ $aturi := .Issue.AtUri }}
    {{ template "repo/fragments/reactions"
      (dict "Reactions"   (index .Reactions $aturi)
            "UserReacted" (index .UserReacted $aturi)
            "ThreadAt"    $aturi) }}
  </div>
</section>
{{ end }}

{{ define "issueHeader" }}
  <header class="pb-2">
    <h1 class="text-2xl">
      {{ .Title | description }}
      <span class="text-gray-500 dark:text-gray-400">#{{ .IssueId }}</span>
    </h1>
  </header>
{{ end }}

{{ define "issueInfo" }}
  {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
  {{ $icon := "ban" }}
  {{ if eq .Issue.State "open" }}
      {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
      {{ $icon = "circle-dot" }}
  {{ end }}
  <div class="flex items-center gap-2">
    <span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }}">
        {{ i $icon "w-3 h-3 mr-1.5 text-white dark:text-white" }}
        <span class="text-white dark:text-white text-sm">{{ if eq .Issue.State "open" }}Open{{ else }}Closed{{ end }}</span>
    </span>

    <span class="text-gray-500 dark:text-gray-400 text-sm flex flex-wrap items-center gap-1">
      opened by
      {{ template "user/fragments/picLink" (list .Issue.Did "size-6" (index .VouchRelationships (did .Issue.Did))) }}
      <a href="/{{ resolve .Issue.Did }}">{{ resolve .Issue.Did }}</a>
      <span class="select-none before:content-['\00B7']"></span>
      {{ if .Issue.Edited }}
        edited {{ template "repo/fragments/time" .Issue.Edited }}
      {{ else }}
        {{ template "repo/fragments/time" .Issue.Created }}
      {{ end }}
    </span>

    {{ if and .LoggedInUser (eq .LoggedInUser.Did .Issue.Did) }}
      <div class="ml-auto flex items-center gap-2">
        {{ template "issueActions" . }}
      </div>
    {{ end }}
  </div>
  <div id="issue-actions-error" class="error"></div>
{{ end }}

{{ define "issueActions" }}
  {{ template "editIssue" . }}
  {{ template "deleteIssue" . }}
{{ end }}

{{ define "editIssue" }}
  <a
    class="text-gray-500 dark:text-gray-400 flex gap-1 items-center group cursor-pointer"
    hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/edit"
    hx-swap="innerHTML"
    hx-target="#issue-{{.Issue.IssueId}}">
    {{ i "pencil" "size-3" }}
  </a>
{{ end }}

{{ define "deleteIssue" }}
  <a
    class="text-red-500 dark:text-red-400 hover:text-red-600 hover:dark:text-red-300 flex gap-1 items-center group cursor-pointer"
    hx-delete="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/"
    hx-confirm="Are you sure you want to delete your issue?"
    hx-swap="none">
    {{ i "trash-2" "size-3 inline group-[.htmx-request]:hidden" }}
    {{ i "loader-circle" "size-3 animate-spin hidden group-[.htmx-request]:inline" }}
  </a>
{{ end }}

{{ define "repoAfter" }}
  <div class="flex flex-col gap-4 mt-4">
    {{
      template "fragments/comment/commentList"
      (dict
        "LoggedInUser"       $.LoggedInUser
        "Reactions"          $.Reactions
        "UserReacted"        $.UserReacted
        "VouchRelationships" $.VouchRelationships
        "CommentList"        $.CommentList)
    }}

    {{ template "repo/issues/fragments/newComment" . }}
  </div>
{{ end }}