{{ $id := delimit (slice "github" (partial "functions/uid.html" .)) "-" }}
{{- $githubURL := print "https://api.github.com/repos/" (.Get "repo") -}}
{{- $githubData := resources.GetRemote $githubURL | transform.Unmarshal -}}
{{- $githubThumbnailURL := print "https://opengraph.githubassets.com/0/" (.Get "repo") -}}
{{- $showThumbnail := .Get "showThumbnail" | default true -}}

{{- with $githubData -}}
  <div class="github-card-wrapper">
    <a id="{{ $id }}" target="_blank" href="{{ .html_url }}" class="cursor-pointer">
      <div
        class="w-full md:w-auto p-0 m-0 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
        {{- if $showThumbnail -}}
          <div class="w-full nozoom">
            <img
              src="{{ $githubThumbnailURL }}"
              alt="GitHub Repository Thumbnail"
              class="nozoom mt-0 mb-0 w-full h-full object-cover">
          </div>
        {{- end -}}


        <div class="w-full md:w-auto pt-3 p-5">
          <div class="flex items-center">
            <span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
              {{ partial "icon.html" "github" }}
            </span>
            <div
              id="{{ $id }}-full_name"
              class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
              {{ .full_name | markdownify }}
            </div>
          </div>

          <p id="{{ $id }}-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
            {{ .description | markdownify }}
          </p>

          <div class="m-0 mt-2 flex items-center">
            {{ $language := .language | default "fallback" }}
            {{ $className := printf "background-color-%s" (md5 $language) }}
            <span
              class="mr-1 inline-block h-3 w-3 rounded-full {{ $className }}"></span>
            <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
              {{ if .language }}{{ .language }}{{ else }}null{{ end }}
            </div>

            <span class="text-md mr-1 text-neutral-800 dark:text-neutral">
              {{ partial "icon.html" "star" }}
            </span>
            <div id="{{ $id }}-stargazers" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
              {{ .stargazers_count }}
            </div>

            <span class="text-md mr-1 text-neutral-800 dark:text-neutral">
              {{ partial "icon.html" "fork" }}
            </span>
            <div id="{{ $id }}-forks" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
              {{ .forks }}
            </div>
          </div>
        </div>
      </div>
      {{ $fetchRepo := resources.Get "js/fetch-repo.js" }}
      {{ $fetchRepo = $fetchRepo | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
      <script
        async
        type="text/javascript"
        src="{{ $fetchRepo.RelPermalink }}"
        integrity="{{ $fetchRepo.Data.Integrity }}"
        data-repo-url="{{ $githubURL }}"
        data-repo-id="{{ $id }}"></script>
    </a>
  </div>
{{- else -}}
  {{ warnf "github shortcode: unable to fetch %q: %s" $githubURL .Position }}
{{- end -}}