{{ define "main" }}
<div class="content-grid">

  <!-- Article -->
  <article id="main-content">

    <!-- Post Header -->
    <header class="post-header">

      <!-- Breadcrumb -->
      <nav class="post-breadcrumb" aria-label="Breadcrumb">
        <a href="{{ .Site.BaseURL }}">~/</a>
        <span aria-hidden="true">/</span>
        {{- with .Section }}
        <a href="{{ $.Site.BaseURL }}{{ . }}/">{{ . }}</a>
        <span aria-hidden="true">/</span>
        {{- end }}
        <span>{{ .File.BaseFileName }}</span>
      </nav>

      <!-- Title -->
      <h1 class="post-title">{{ .Title }}</h1>
        {{- with .Params.subtitle }}
        <p class="post-subtitle">{{ . }}</p>
        {{- end }}
      <!-- Meta -->
      <div class="post-meta">
        <div class="post-meta__item">
          <span class="post-meta__label">DATE</span>
          <time class="post-meta__value" datetime="{{ .Date.Format "2006-01-02" }}">
            {{ .Date.Format "January 2, 2006" }}
          </time>
        </div>

        {{- with .Params.author }}
        <div class="post-meta__item">
          <span class="post-meta__label">BY</span>
          <span class="post-meta__value">{{ . }}</span>
        </div>
        {{- else }}
        {{- with $.Site.Params.author }}
        <div class="post-meta__item">
          <span class="post-meta__label">BY</span>
          <span class="post-meta__value">{{ . }}</span>
        </div>
        {{- end }}
        {{- end }}

        <div class="post-meta__item">
          <span class="post-meta__label">READ</span>
          <span class="post-reading-time">~{{ .ReadingTime }} min</span>
        </div>

        {{- if .Params.lastmod }}
        <div class="post-meta__item">
          <span class="post-meta__label">UPDATED</span>
          <time class="post-meta__value" datetime="{{ .Lastmod.Format "2006-01-02" }}">
            {{ .Lastmod.Format "2006-01-02" }}
          </time>
        </div>
        {{- end }}
      </div>

    </header>

    <!-- Body -->
    <div class="post-body">
      {{ .Content }}
    </div>

    <!-- Footer -->
    <footer class="post-footer">

      {{- with .Params.tags }}
      <div class="post-tags-section">
        <span class="post-tags-section__label">TAGS ›</span>
        {{- range . }}
        <a href="{{ "tags/" | relURL }}{{ . | urlize }}/" class="tag">{{ . }}</a>
        {{- end }}
      </div>
      {{- end }}

      <!-- Prev / Next -->
      {{- if or .PrevInSection .NextInSection }}
      <nav class="post-nav" aria-label="Post navigation">
        {{- if .PrevInSection }}
        <a href="{{ .PrevInSection.Permalink }}" class="post-nav__item pixel-border post-nav__item--prev">
          <span class="post-nav__label">&lt;&lt; PREV ENTRY</span>
          <span class="post-nav__title">{{ .PrevInSection.Title }}</span>
        </a>
        {{- else }}
        <div></div>
        {{- end }}

        {{- if .NextInSection }}
        <a href="{{ .NextInSection.Permalink }}" class="post-nav__item pixel-border post-nav__item--next">
          <span class="post-nav__label">NEXT ENTRY &gt;&gt;</span>
          <span class="post-nav__title">{{ .NextInSection.Title }}</span>
        </a>
        {{- end }}
      </nav>
      {{- end }}

    </footer>

   {{ partial "comments.html" . }}
  </article>

  <!-- Sidebar -->
  {{ partial "sidebar.html" . }}

</div>
{{ end }}