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

{{ define "content" }}
    <section id="repo-header" class="mb-2 py-2 px-4 dark:text-white">
      <div class="flex flex-col sm:flex-row items-start gap-4 justify-between mb-2">
        <div class="flex flex-col gap-2">
          {{ template "repoOwnerAndName" . }}
          {{ template "repoForkInfo" . }}
        </div>
        <div class="hidden sm:block sm:flex-shrink-0">
          {{ template "repoActions" . }}
        </div>
      </div>
      {{ template "repoMetadata" . }}

      <div class="block sm:hidden mt-4">
        {{ template "repoActions" . }}
      </div>
    </section>

    <section class="w-full flex flex-col" >
        <nav class="w-full pl-4 overflow-auto">
            <div class="flex z-60">
                {{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }}
                {{ $tabs := .RepoInfo.GetTabs }}
                {{ $tabmeta := .RepoInfo.TabMetadata }}
                {{ range $item := $tabs }}
                    {{ $key := index $item 0 }}
                    {{ $value := index $item 1 }}
                    {{ $icon := index $item 2 }}
                    {{ $meta := index $tabmeta $key }}
                    <a
                        href="/{{ $.RepoInfo.FullName }}{{ $value }}"
                        class="relative -mr-px group no-underline hover:no-underline"
                        hx-boost="true"
                    >
                        <div
                            class="px-4 py-1 mr-1 text-black dark:text-white min-w-[80px] text-center relative rounded-t whitespace-nowrap
                             {{ if eq $.Active $key }}
                                {{ $activeTabStyles }}
                             {{ else }}
                                group-hover:bg-gray-100/25 group-hover:dark:bg-gray-700/25
                             {{ end }}
                             "
                        >
                            <span class="flex items-center justify-center">
                                {{ i $icon "w-4 h-4 mr-2" }}
                                {{ $key }}
                                {{ if $meta }}
                                  <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm ml-1">{{  $meta }}</span>
                                {{ end }}
                            </span>
                        </div>
                    </a>
                {{ end }}
            </div>
        </nav>
        {{ block "repoContentLayout" . }}
          <section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white">
            {{ block "repoContent" . }}{{ end }}
          </section>
          {{ block "repoAfter" . }}{{ end }}
        {{ end }}
    </section>
{{ end }}

{{ define "repoOwnerAndName" }}
  <div class="flex items-center gap-2 flex-wrap text-lg">
    {{ template "user/fragments/picHandleLink" .RepoInfo.OwnerDid }}
    <span class="select-none">/</span>
    <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
  </div>
{{ end }}

{{ define "repoForkInfo" }}
  {{ if .RepoInfo.Source }}
    {{ $sourceOwner := resolve .RepoInfo.Source.Did }}
    <div class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-300 mb-2 flex-wrap">
      {{ i "git-fork" "w-3 h-3 shrink-0" }}
      <span>forked from</span>
      <a class="underline" href="/{{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}">
        {{ $sourceOwner }}/{{ .RepoInfo.Source.Name }}
      </a>
    </div>
  {{ end }}
{{ end }}

{{ define "repoMetadata" }}
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600 dark:text-gray-300">
    {{ if .RepoInfo.Description }}
      {{ .RepoInfo.Description | description }}
    {{ else }}
      <span class="italic">this repo has no description</span>
    {{ end }}

    {{ with .RepoInfo.Website }}
      <span class="flex items-center gap-1">
        <span class="flex-shrink-0">{{ i "globe" "size-4" }}</span>
        <a href="{{ . }}">{{ . | trimUriScheme }}</a>
      </span>
    {{ end }}

    {{ if .RepoInfo.Topics }}
      <div class="flex items-center gap-1">
        {{ range .RepoInfo.Topics }}
          <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm">{{ . }}</span>
        {{ end }}
      </div>
    {{ end }}
  </div>
{{ end }}

{{ define "repoActions" }}
  <div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto">
    {{ template "fragments/starBtn"
      (dict "SubjectAt" .RepoInfo.RepoAt
            "IsStarred" .RepoInfo.IsStarred
            "StarCount" .RepoInfo.Stats.StarCount) }}
    <a
      class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
      hx-boost="true"
      href="/{{ .RepoInfo.FullName }}/fork"
    >
      {{ i "git-fork" "w-4 h-4" }}
      fork
      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
    </a>
    <a
      class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
      href="/{{ .RepoInfo.FullName }}/feed.atom">
      {{ i "rss" "size-4" }}
      <span class="md:hidden">atom</span>
    </a>
  </div>
{{ end }}