{{ $noindex := .Params.noindex }}
<div class="mb-4 md:mb-6">
  {{ partial "breadcrumb.html" . }}
</div>

<div{{ if not $noindex }} id="page-content"{{ end }}>
  <h1 class="dark:text-gray-50 font-secondary font-extrabold text-4xl lg:text-5xl leading-tight tracking-tight">
    {{ .Title | markdownify }}
  </h1>

  {{ with .Description }}
  <p class="dark:text-gray-200 mt-5 md:text-lg text-gray-500 prose dark:prose-dark">
    {{ . | markdownify }}
  </p>
  {{ end }}

  {{ if eq .Section "guides" }}
  {{ partial "guides/badges.html" . }}
  {{ end }}

  {{ if or (eq .Section "guides") (eq .Section "highlights") }}
    {{ if or .Date .Params.authors }}
    <div class="mt-3 flex items-center space-x-3 text-gray-500 dark:text-gray-300">
      {{ if .Date }}
      {{ $date := .Date | dateFormat "January 2, 2006" }}
      <time datetime="{{ $date }}" class="text-sm">
        {{ $date }}
      </time>
      {{ end }}
      {{ if and .Date .Params.authors }}
      <span class="text-sm">by</span>
      {{ end }}
      {{ if .Params.authors }}
      <div class="flex items-center space-x-2">
        {{ range $index, $author := .Params.authors }}
          {{ $handle := $author }}
          {{ $img := printf "https://github.com/%s.png" $handle }}
          {{ $link := printf "https://github.com/%s" $handle }}
          {{ $apiUrl := printf "https://api.github.com/users/%s" $handle }}
          {{ $name := $handle }}
          {{ $displayName := $handle }}
          {{ $result := try (resources.GetRemote $apiUrl) }}
          {{ with $result.Value }}
            {{ $data := . | transform.Unmarshal }}
            {{ if $data.name }}
              {{ $name = $data.name }}
              {{ $displayName = $data.name }}
            {{ end }}
          {{ end }}
          {{ if gt $index 0 }}<span class="text-sm">,</span>{{ end }}
          <a href="{{ $link }}" class="flex items-center space-x-2 group" rel="noopener" target="_blank">
            <img
              class="h-8 w-8 rounded-full ring-1 ring-white dark:ring-dark"
              src="{{ $img }}"
              alt="Author avatar for {{ $handle }}"
            />
            <span class="text-sm font-medium text-gray-700 group-hover:text-secondary dark:text-gray-200">
              {{ $displayName }}
            </span>
          </a>
        {{ end }}
      </div>
      {{ end }}
    </div>
    {{ end }}
  {{ end }}

  <div class="mt-12">
    {{ partial "inner-content.html" . }}
  </div>
</div>