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

{{ define "repoContent" }}
<section id="commit-table" class="overflow-x-auto">
    <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
       commits 
    </h2>

    <!-- desktop view (hidden on small screens) -->
    <table class="w-full border-collapse hidden md:table">
        <thead>
            <tr>
                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
            </tr>
        </thead>
        <tbody>
            {{ range $index, $commit := .Commits }}
                {{ $messageParts := splitN $commit.Message "\n\n" 2 }}
                <tr class="{{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
                    <td class=" py-3 align-top">
                        {{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
                        {{ if $didOrHandle }}
                            <a href="/{{ $didOrHandle }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $didOrHandle }}</a>
                        {{ else }}
                            <a href="mailto:{{ $commit.Author.Email }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $commit.Author.Name }}</a>
                        {{ end }}
                    </td>
                    <td class=" py-3 align-top font-mono flex items-end">
                        <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ slice $commit.Hash.String 0 8 }}</a>
                        <div class="inline-flex">
                            <button class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" 
                                title="Copy SHA"
                                onclick="navigator.clipboard.writeText('{{ $commit.Hash.String }}'); this.innerHTML=`{{ i "copy-check" "w-4 h-4" }}`; setTimeout(() => this.innerHTML=`{{ i "copy" "w-4 h-4" }}`, 1500)">
                                    {{ i "copy" "w-4 h-4" }}
                            </button>
                            <a href="/{{ $.RepoInfo.FullName }}/tree/{{ $commit.Hash.String }}" class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" title="Browse repository at this commit">
                                {{ i "folder-code" "w-4 h-4" }}
                            </a>
                        </div>
                    </td>
                    <td class=" py-3 align-top">
                      <div>
                          <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white no-underline hover:underline">{{ index $messageParts 0 }}</a>
                          {{ if gt (len $messageParts) 1 }} 
                          <button class="ml-2 py-1/2 px-1 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 rounded" hx-on:click="this.nextElementSibling.classList.toggle('hidden')">{{ i "ellipsis" "w-3 h-3" }}</button>
                          <p class="hidden mt-1 text-sm text-gray-600 dark:text-gray-400">{{ nl2br (index $messageParts 1) }}</p>
                          {{ end }}
                      </div>
                    </td>
                    <td class=" py-3 align-top text-gray-500 dark:text-gray-400">{{ timeFmt $commit.Author.When }}</td>
                </tr>
            {{ end }}
        </tbody>
    </table>

    <!-- mobile view (visible only on small screens) -->
    <div class="md:hidden">
        {{ range $index, $commit := .Commits }}
            <div class="relative p-2 {{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
                <div id="commit-message">
                    {{ $messageParts := splitN $commit.Message "\n\n" 2 }}
                    <div class="text-base cursor-pointer">
                        <div>
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" 
                                       class="inline no-underline hover:underline dark:text-white">
                                       {{ index $messageParts 0 }}
                                    </a>
                                    {{ if gt (len $messageParts) 1 }}
                                        <button 
                                            class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 rounded dark:bg-gray-700 dark:hover:bg-gray-600"
                                            hx-on:click="this.nextElementSibling.classList.toggle('hidden')">
                                            {{ i "ellipsis" "w-3 h-3" }}
                                        </button>
                                    {{ end }}
                                    {{ if gt (len $messageParts) 1 }}
                                        <p class="hidden mt-1 text-sm cursor-text pb-2 dark:text-gray-300">
                                            {{ nl2br (index $messageParts 1) }}
                                        </p>
                                    {{ end }}
                                </div>
                                <a href="/{{ $.RepoInfo.FullName }}/tree/{{ $commit.Hash.String }}" 
                                   class="p-1 mr-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" 
                                   title="Browse repository at this commit">
                                    {{ i "folder-code" "w-4 h-4" }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-xs text-gray-500 dark:text-gray-400">
                    <span class="font-mono">
                        <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}"
                           class="text-gray-500 dark:text-gray-400 no-underline hover:underline">
                           {{ slice $commit.Hash.String 0 8 }}
                        </a>
                    </span>
                    <span class="mx-2 before:content-['·'] before:select-none"></span>
                    <span>
                        {{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
                        <a href="{{ if $didOrHandle }}/{{ $didOrHandle }}{{ else }}mailto:{{ $commit.Author.Email }}{{ end }}"
                           class="text-gray-500 dark:text-gray-400 no-underline hover:underline">
                           {{ if $didOrHandle }}{{ $didOrHandle }}{{ else }}{{ $commit.Author.Name }}{{ end }}
                        </a>
                    </span>
                    <div class="inline-block px-1 select-none after:content-['·']"></div>
                    <span>{{ shortTimeFmt $commit.Author.When }}</span>
                </div>
            </div>
        {{ end }}
    </div>
</section>

{{ end }}

{{ define "repoAfter" }}
  {{ $commits_len := len .Commits }}
  <div class="flex justify-end mt-4 gap-2">
      {{ if gt .Page 1 }}<a class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700" hx-boost="true" onclick="window.location.href = window.location.pathname + '?page={{ sub .Page 1 }}'">{{ i "chevron-left" "w-4 h-4" }} previous</a>{{ else }}<div></div>{{ end }}
      {{ if eq $commits_len 60 }}<a class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700" hx-boost="true" onclick="window.location.href = window.location.pathname + '?page={{ add .Page 1 }}'">next {{ i "chevron-right" "w-4 h-4" }}</a>{{ end }}
  </div>
{{ end }}