{{ define "header" }}

{{- partial "header-nav" . -}}

{{/* Hero Section */}}
<div class="text-white w-full">
  <div
    class="bg-no-repeat bg-cover bg-[position:70%] min-h-[30rem] md:pr-0 flex justify-center items-center bg-brand-blue">
    <div class="h-full flex flex-col justify-center items-center px-8 sm:p-6 text-left">
      <div class="max-w-[26rem]">
        <h1 class="lg:text-7xl font-normal text-white text-center leading-[4rem] mx-auto uppercase">
          The university Online Blog</h1>
        <p class="text-2xl font-bold text-yellow text-center mx-auto uppercase">
          Trending topics in the tu online community
        </p>
      </div>
      <div class="hidden flex-col justify-end items-start sm:items-end md:px-6 md:pl-32 md:pr-0">
      </div>
    </div>
  </div>
</div>
{{/* Navbar */}}
<div
  class="w-screen pt-4 md:pt-0 min-h-[6rem] h-auto md:h-24 bg-accent flex flex-wrap items-center relative md:justify-between bg-gray-200 mx-auto">
  <div
    class="blog-nav-container flex flex-wrap justify-center md:justify-between md:inline-flex items-center md:w-[1000px] mx-auto pl-3 relative w-full">
    <div class="flex-wrap inline-flex md:justify-start md:w-auto gap-8 mb-4 md:mb-0 w-full">
      <a class="text-brand-blue" href="/blog/">
        Back to all articles
      </a>
      <a class="text-brand-blue" href="/categories/">
        All Categories
      </a>
      {{ range .Site.Taxonomies.categories }}
      <a class="text-brand-blue" href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
      {{ end }}
    </div>

    <blog-search class="w-full md:w-[20rem]"></blog-search>
  </div>
</div>
{{ end }}

{{ define "main" }}
<article>
  <h3 class="text-left mt-8 max-w-[1000px] mx-auto px-8">Selected {{.Data.Singular}}: <span
      class="text-brand-blue">"{{.Title}}"</span>
  </h3>
    {{.Content}}

  <section class="max-w-[1000px] grid selection:grid-cols-1 md:grid-cols-3 gap-2 justify-center pb-10 mx-auto">
    {{ range .Pages }}
    <div class="p-5 text-left ">
      <a href="{{ .Permalink }}">
        <div class="flex justify-center mb-4">
          {{ $context := (dict
            "context" .
            "Destination" .Params.image.src
            "Text" .Params.image.alt
            "Class" "rounded-lg"
            )}}
            {{- partial "compressed-image.html" $context}}
        </div>
      </a>
      <div class="flex flex-wrap">
        {{ partial "categories" . }}
      </div>
      <a href="{{ .Permalink }}" class="!text-black !no-underline">
        <h4 class="my-2 text-black text-xl font-body" title="{{ .Summary }}">{{ .Title }}</h4>
      </a>
      <h2 class="text-xs text-gray-400 m-0 p-0 font-body text-black">
        {{- partial "authors" . }}
      </h2>
      <h2 class="text-xs m-0 p-0 font-body text-black">{{ .Date.Format "Jan 2, 2006" }} </h2>
    </div>
    {{ end }}
  </section>

</article>
{{ end }}