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

{{ define "extrameta" }}
    {{ $title := "issues"}}
    {{ $url := printf "https://tangled.org/%s/issues" .RepoInfo.FullName }}

    {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
{{ end }}

{{ define "repoContent" }}
  {{ $active := "closed" }}
  {{ if .FilteringByOpen }}
    {{ $active = "open" }}
  {{ end }}

  {{ $open := 
     (dict
       "Key" "open"
       "Value" "open"
       "Icon" "circle-dot"
       "Meta" (string .RepoInfo.Stats.IssueCount.Open)) }}
  {{ $closed := 
     (dict
       "Key" "closed"
       "Value" "closed"
       "Icon" "ban"
       "Meta" (string .RepoInfo.Stats.IssueCount.Closed)) }}
  {{ $values := list $open $closed }}

  <div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2">
    <form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" method="GET">
      <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">
      <div class="flex-1 flex relative">
        <input
          id="search-q"
          class="flex-1 py-1 pl-2 pr-10 mr-[-1px] rounded-r-none focus:border-0 focus:outline-none focus:ring focus:ring-blue-400 ring-inset peer"
          type="text"
          name="q"
          value="{{ .FilterQuery }}"
          placeholder=" "
        >
        <a
          href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"
          class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
        >
          {{ i "x" "w-4 h-4" }}
        </a>
      </div>
      <button
        type="submit"
        class="p-2 text-gray-400 border rounded-r border-gray-400 dark:border-gray-600"
      >
        {{ i "search" "w-4 h-4" }}
      </button>
    </form>
    <div class="sm:row-start-1">
      {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active "Include" "#search-q") }}
    </div>
    <a
      href="/{{ .RepoInfo.FullName }}/issues/new"
      class="col-start-3 btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
    >
      {{ i "circle-plus" "w-4 h-4" }}
      <span>new</span>
    </a>
  </div>
  <div class="error" id="issues"></div>
{{ end }}

{{ define "repoAfter" }}
  <div class="mt-2">
    {{ template "repo/issues/fragments/issueListing" (dict "Issues" .Issues "RepoPrefix" .RepoInfo.FullName "LabelDefs" .LabelDefs) }}
  </div>
  {{if gt .IssueCount .Page.Limit }} 
    {{ block "pagination" . }} {{ end }} 
  {{ end }}
{{ end }}

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

  {{ $prev := .Page.Previous.Offset }}
  {{ $next := .Page.Next.Offset }}
  {{ $lastPage := sub .IssueCount (mod .IssueCount .Page.Limit) }}

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

  <!-- dont show first page if current page is first page -->
  {{ if gt .Page.Offset 0 }}
    <a
      hx-boost="true"
      href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset=0&limit={{ .Page.Limit }}"
    >
      1
    </a>
  {{ end }}

  <!-- if previous page is not first or second page (prev > limit) -->
  {{ if gt $prev .Page.Limit }}
    <span>...</span>
  {{ end }}

  <!-- if previous page is not the first page -->
  {{ if gt $prev 0 }}
    <a
      hx-boost="true"
      href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $prev }}&limit={{ .Page.Limit }}"
    >
      {{ add (div $prev .Page.Limit) 1 }}
    </a>
  {{ end }}

  <!-- current page. this is always visible -->
  <span class="font-bold">
    {{ add (div .Page.Offset .Page.Limit) 1 }}
  </span>

  <!-- if next page is not last page -->
  {{ if lt $next $lastPage }}
    <a
      hx-boost="true"
      href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $next }}&limit={{ .Page.Limit }}"
    >
      {{ add (div $next .Page.Limit) 1 }}
    </a>
  {{ end }}

  <!-- if next page is not second last or last page (next < issues - 2 * limit) -->
  {{ if lt ($next) (sub .IssueCount (mul (2) .Page.Limit)) }}
    <span>...</span>
  {{ end }}

  <!-- if its not the last page -->
  {{ if lt .Page.Offset $lastPage }} 
    <a
      hx-boost="true"
      href = "/{{ $.RepoInfo.FullName }}/issues?state={{ $currentState }}&q={{ .FilterQuery }}&offset={{ $lastPage }}&limit={{ .Page.Limit }}"
    >
      {{ add (div $lastPage .Page.Limit) 1 }}
    </a>
  {{ end }}

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