{{ define "main" }}

  <h2 class="pill">{{ if eq .Title "Humour"}} Humour {{ else if eq .Title "How To" }} How-To {{ else if eq .Title "Op Ed" }} Op-Eds {{ else }} {{ .Title | pluralize }}{{ end }}</h2>

{{- $paginator := .Paginate (where .Data.Pages "Type" "articles") -}}

{{- range $paginator.Pages }}
  <a href="{{- .Permalink -}}" class="post--list-item">
    <section>
      <header class="post--list-header">
        <picture class="post--list-image">
          {{- $imgsm := replace .Params.primary_image "/upload/" "/upload/w_740,h_490,c_fill,g_faces/" -}}
          {{- $imglg := replace .Params.primary_image "/upload/" "/upload/w_1480,h_980,c_fill,g_faces/" }}
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkkAQAAB8AG7jymN8AAAAASUVORK5CYII=" data-srcset="{{ $imgsm }} 1x, {{ $imglg }} 2x" alt="{{ .Title | htmlUnescape }}" media="(min-width: 40em)" class="lazyload">
        </picture>
        <div class="post--list-title">
          <h1><span title="{{- .Title | htmlUnescape -}}">{{- .Title | htmlUnescape -}}</span></h1>
          {{- with .Params.categories -}}
          <em class="post--meta-category">{{- . -}}</em>
          {{- end -}}
        </div>
      </header>
      
      <p class="post--list-desc">{{- .Params.short_description | htmlUnescape -}}</p>

      <footer class="post--list-meta">
    {{- with .Params.author -}}
      {{- range $author := . -}}
        {{- with $.Site.GetPage "page" $author }}
        <picture class="post--meta-author_image">
          {{- $imgsm := replace .Params.primary_image "/upload/" "/upload/w_40,h_40,c_fill,g_face/" -}}
          {{- $imglg := replace .Params.primary_image "/upload/" "/upload/w_80,h_80,c_fill,g_face/" }}
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" data-srcset="{{ $imgsm }} 1x, {{ $imglg }} 2x" alt="{{ .Title | htmlUnescape }}" media="(min-width: 40em)" class="lazyload">
        </picture>
        <em>{{- .Title -}}</em>
        {{- end -}}
      {{- end -}}
    {{- end }}
        <span class="post--meta-date">{{ .Date.Format "Jan 2, 2006" }}</span>
      </footer>
    </section>
  </a>
{{- end -}}

{{- partial "pagination.html" . -}}
{{ end }}