{{ define "title" }}issues · {{ .RepoInfo.FullName }}{{ end }}

{{ define "extrameta" }}
    {{ $title := "issues"}}
    {{ $url := printf "https://tangled.sh/%s/issues" .RepoInfo.FullName }}
    
    {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
{{ end }}

{{ define "repoContent" }}
<div class="flex justify-between items-center gap-4">
  <div class="flex gap-4">
    <a
        href="?state=open"
        class="flex items-center gap-2 {{ if .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
        >
        {{ i "circle-dot" "w-4 h-4" }}
        <span>{{ .RepoInfo.Stats.IssueCount.Open }} open</span>
    </a>
    <a
        href="?state=closed"
        class="flex items-center gap-2 {{ if not .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
        >
        {{ i "ban" "w-4 h-4" }}
        <span>{{ .RepoInfo.Stats.IssueCount.Closed }} closed</span>
    </a>
  </div>
  <a
      href="/{{ .RepoInfo.FullName }}/issues/new"
      class="btn text-sm flex items-center justify-center gap-2 no-underline hover:no-underline"
      >
      {{ i "circle-plus" "w-4 h-4" }}
      <span>new</span>
  </a>
</div>
<div class="error" id="issues"></div>
{{ end }}

{{ define "repoAfter" }}
<div class="flex flex-col gap-2 mt-2">
  {{ range .Issues }}
  <div class="rounded drop-shadow-sm bg-white px-6 py-4 dark:bg-gray-800 dark:border-gray-700">
    <div class="pb-2">
      <a
          href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}"
          class="no-underline hover:underline"
          >
          {{ .Title }}
          <span class="text-gray-500">#{{ .IssueId }}</span>
      </a>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
      {{ $icon := "ban" }}
      {{ $state := "closed" }}
      {{ if .Open }}
          {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
          {{ $icon = "circle-dot" }}
          {{ $state = "open" }}
      {{ end }}

      <span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }} text-sm">
          {{ i $icon "w-3 h-3 mr-1.5 text-white dark:text-white" }}
          <span class="text-white dark:text-white">{{ $state }}</span>
      </span>

      <span>
        {{ $owner := index $.DidHandleMap .OwnerDid }}
        <a href="/{{ $owner }}">{{ $owner }}</a>
      </span>

      <span class="before:content-['·']">
        <time>
          {{ .Created | timeFmt }}
        </time>
      </span>

      <span class="before:content-['·']">
        {{ $s := "s" }}
        {{ if eq .Metadata.CommentCount 1 }}
        {{ $s = "" }}
        {{ end }}
        <a href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}" class="text-gray-500 dark:text-gray-400">{{ .Metadata.CommentCount }} comment{{$s}}</a>
      </span>
    </p>
  </div>
  {{ end }}
</div>

{{ block "pagination" . }} {{ end }}

{{ end }}

{{ define "pagination" }}
<div class="flex justify-end mt-4 gap-2">
    {{ $currentState := "closed" }}
    {{ if .FilteringByOpen }}
      {{ $currentState = "open" }}
    {{ end }}

    {{ if gt .Page.Offset 0 }}
       {{ $prev := .Page.Previous }}
        <a
            class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
            hx-boost="true"
            href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&offset={{ $prev.Offset }}&limit={{ $prev.Limit }}"
        >
            {{ i "chevron-left" "w-4 h-4" }}
            previous
        </a>
    {{ else }}
        <div></div>
    {{ end }}

    {{ if eq (len .Issues) .Page.Limit }}
       {{ $next := .Page.Next }}
        <a
            class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
            hx-boost="true"
            href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&offset={{ $next.Offset }}&limit={{ $next.Limit }}"
        >
            next
            {{ i "chevron-right" "w-4 h-4" }}
        </a>
    {{ end }}
</div>
{{ end }}