{{ define "head" }}
{{ end }}

{{ define "main" }}

<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="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 tracking-[0.15rem]">
          Trending topics in the tu online community
        </p>
      </div>
      <div class="hidden flex flex-col justify-end items-start sm:items-end md:px-6 md:pl-32 md:pr-0">
      </div>
    </div>
  </div>
</div>

<!-- Nav Bar -->
<!-- Nav bar from hi-fi comp removed due to being unable to select ONE specific
    category to list, if a blog post has multiple -->
<div class="w-screen h-24 bg-accent flex flex-wrap items-center md:justify-between bg-[#EAF3FF]">
  <div
    class="blog-nav-container flex flex-wrap justify-center md:justify-between md:inline-flex items-center w-[1280px] mx-auto px-12 relative">
    <div class="inline-flex justify-between md:justify-start w-full md:w-auto gap-8 font-body mb-4 md:mb-0">
      &#x2190;<a class="text-brand-blue" href="/blog/">
        Return to all articles
      </a>
    </div>
    <blog-search class="w-full md:w-[20rem]"></blog-search>
  </div>
</div>


<div class="grid md:grid-cols-7 gap-16 mb-8 mt-6 md:mt-12 blog-article max-w-[1280px] mx-auto px-8">

  <article class="blog-spacing px-4 md:px-0 grid col-span-5">

    <h2 class="font-medium pb-2 font-body text-2xl text-black">{{ .Params.headline }}</h2>
    <h5 class="mb-16 text-gray-400 font-body text-xs">Written by: <span>{{- partial "authors" . }}</span>
      &nbsp; &bull; &nbsp;{{ .Date.Format "Jan 2, 2006" }}</h5>

      {{ $context := (dict
        "context" .
        "Destination" .Params.image.src
        "Text" .Params.image.alt
        "Class" "mb-8"
        )}}
        {{- partial "compressed-image.html" $context}}

    {{.Content}}
  </article>

  <aside class="
      col-span-2
      hidden
      md:block">

    {{- partial "related" .}}
    <h2 class="mb-4">Categories</h2>
    {{- partial "categories" .}}

  </aside>

</div>

<nav class="w-full flex flex-row justify-between py-10 max-w-[1280px] mx-auto px-8">
  {{ with .PrevInSection }}
  <a class="previous" href="{{.Permalink}}">Previous: {{.Title}}</a>
  {{ end }}
  {{ with .NextInSection }}
  <a class="next" href="{{.Permalink }}">Next: {{.Title}}</a>
  {{ end }}
</nav>

<div class="bg-gray-100">
  <div class="max-w-[1280px] mx-auto px-8 pt-20">
    <h2 class="pt-0 pb-6">Recent Articles</h2>


    {{ range first 1 .Page.FirstSection.Pages }}
    <div class="max-w-[1280px] grid selection:grid-cols-1 md:grid-cols-3 gap-2 justify-center pb-10 mx-auto">
      {{ range after 0 .FirstSection.Pages }}
      {{ partial "card" . }}
      {{ end }}
    </div>


    {{ end }}
    <!-- {{ range .Site.RegularPages.Related . | first 3 }}
      {{ partial "card" . }}
      {{ end }} -->

  </div>
</div>

<div class="text-white min-w-screen bg-pale-blue py-8">
  <div
    class="mx-auto flex flex-col md:flex-row flex-wrap justify-center md:justify-between text-center md:text-left items-center max-w-[800px] px-8">
    <h5 class="text-nav-blue pb-6 md:pb-0 text-3xl">Learn more about the benefits of receiving <br>your degree from
      The University
    </h5>
    <a href="/apply-now/"
      class="no-underline mx-auto md:mx-0 text-[.9rem] py-2 flex justify-center text-center secondary-button max-w-[26rem] px-6 bg-nav-blue m-2  items-center">
      GET MORE INFORMATION
    </a>
  </div>
</div>
{{ end }}