{{ define "main" }}
<article class="prose-lg max-w-2xl mx-auto py-12 px-4">
  <header class="mb-8">
    <h1 class="text-4xl font-newsreader font-semibold mb-4 leading-tight">
      {{ .Title }}
    </h1>
    <div class="text-gray-600 flex gap-4 flex-wrap">
      {{ if .Date }}
      <time datetime="{{ .Date.Format "2006-01-02" }}">
        {{ .Date.Format "January 2, 2006" }}
      </time>
      {{ end }}
      {{ with .Params.author }}
      <span>{{ . }}</span>
      {{ end }}
      {{ if .ReadingTime }}
      <span>{{ .ReadingTime }} min read</span>
      {{ end }}
    </div>
  </header>

  {{ if .Params.toc | default true }}
  <aside class="mb-8 p-4 bg-gray-50 rounded">
    <h2 class="text-sm font-semibold uppercase tracking-wide mb-3">{{ i18n "table_of_contents" | default "Table of Contents" }}</h2>
    {{ .TableOfContents }}
  </aside>
  {{ end }}

  <div class="font-newsreader text-lg leading-relaxed prose prose-newsreader">
    {{ .Content }}
  </div>

  {{ with .Params.tags }}
  <footer class="mt-12 pt-8 border-t">
    <div class="text-sm">
      <span class="font-semibold">{{ i18n "tags" | default "Tags" }}:</span>
      {{ range . }}
      <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="inline-block mr-2 text-ifk-accent hover:text-ifk-accent-hover">
        #{{ . }}
      </a>
      {{ end }}
    </div>
  </footer>
  {{ end }}
</article>

{{ if or .NextInSection .PrevInSection }}
<nav class="max-w-2xl mx-auto px-4 py-12 flex justify-between gap-4">
  {{ with .PrevInSection }}
  <a href="{{ .Permalink }}" class="flex-1 p-4 border rounded hover:bg-gray-50 text-left">
    <div class="text-xs font-semibold uppercase text-gray-600">← {{ i18n "previous" | default "Previous" }}</div>
    <div class="font-newsreader text-lg">{{ .Title }}</div>
  </a>
  {{ end }}
  {{ with .NextInSection }}
  <a href="{{ .Permalink }}" class="flex-1 p-4 border rounded hover:bg-gray-50 text-right">
    <div class="text-xs font-semibold uppercase text-gray-600">{{ i18n "next" | default "Next" }} →</div>
    <div class="font-newsreader text-lg">{{ .Title }}</div>
  </a>
  {{ end }}
</nav>
{{ end }}
{{ end }}