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

{{ define "content" }}
    <section id="repo-header" class="mb-4 py-2 px-6 dark:text-white">
      <p class="text-lg">
        <a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a>
        <span class="select-none">/</span>
        <a href="/{{ .RepoInfo.FullName }}" class="font-bold">{{ .RepoInfo.Name }}</a>
        <span class="ml-3">
          {{ template "fragments/star" .RepoInfo }}
        </span>
      </p>
      {{ template "fragments/repoDescription" . }}
    </section>
    <section class="min-h-screen flex flex-col drop-shadow-sm">
        <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 }}
                    {{ $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-200 dark:group-hover:bg-gray-700
                             {{ end }}
                             "
                        >
                            {{ $key }} 
                            {{ if not (isNil $meta) }}
                            <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm">{{  $meta }}</span>
                            {{ end }}
                        </div>
                    </a>
                {{ end }}
            </div>
        </nav>
        <section
            class="bg-white dark:bg-gray-800 p-6 rounded relative z-20 w-full mx-auto drop-shadow-sm dark:text-white"
        >
            {{ block "repoContent" . }}{{ end }}
        </section>
        {{ block "repoAfter" . }}{{ end }}
    </section>
{{ end }}

{{ define "layouts/repobase" }}
    {{ template "layouts/base" . }}
{{ end }}