{{ define "main" }}
<div class="blogs-page">
  <div class="blogs-container">
    <div class="blogs-screen">
      <div class="blogs-content">
        <nav class="blog-navigation">
          <a href="/blog/" class="nav-link back-link">← All Blog Posts</a>
        </nav>

        <article class="blog-post-card">
          <h1 class="blog-title">
            {{ .Title }} {{ if .Date }}
            <span class="blog-date">{{ .Date.Format "02-01-2006" }}</span>
            {{ end }}
          </h1>
          {{ if .Params.tags }}
          <div class="blog-tags">
            {{ range .Params.tags }}
            <span class="tag">{{ . }}</span>
            {{ end }}
          </div>
          {{ end }}
          <div class="blog-summary">{{ .Content }}</div>
          <div class="blog-footer">
            🛜 <a href="/blog/feed.xml">Available via RSS</a> <br /><br />
            You can respond to this post via
            <a
              href="https://indieweb.org/Webmention"
              target="_blank"
              rel="noopener noreferrer"
              >webmentions</a
            >. <br /><br />
            <div data-webmention-target>
              <span data-webmention-show>
                Mentioned by: <span data-webmention-list></span
              ></span>
            </div>
          </div>
        </article>

        {{ partial "contact-section.html" . }}

        <nav class="blog-post-navigation">
          <div class="post-nav-links">
            {{ with .PrevInSection }}
            <a href="{{ .Permalink }}" class="nav-link prev-post"
              >← {{ .Title }}</a
            >
            {{ else }}
            <span class="nav-link disabled">← Previous</span>
            {{ end }} {{ with .NextInSection }}
            <a href="{{ .Permalink }}" class="nav-link next-post"
              >{{ .Title }} →</a
            >
            {{ else }}
            <span class="nav-link disabled">Next →</span>
            {{ end }}
          </div>
        </nav>
      </div>
    </div>
    <div class="window">{{ partial "elements/window.html" . }}</div>
    <div class="blogs-lavalamp">{{ partial "elements/lavalamp.html" . }}</div>
  </div>
</div>

<script src="/js/footnote-scroll.js"></script>

{{ end }}
