{{ define "main" }}
  <div class="container">
    <h1>{{ .Title }}</h1>

    {{ if eq .Type "articles" }}
      <div class="filter-bar">
        <button class="filter-btn active" data-filter="all">All</button>
        <button class="filter-btn" data-filter="tech">Tech</button>
        <button class="filter-btn" data-filter="life">Life</button>
        <button class="filter-btn" data-filter="quote">Quote</button>
        <button class="filter-btn" data-filter="link">Link</button>
        <button class="filter-btn" data-filter="photo">Photo</button>
      </div>

      <div class="feed-list" id="articles-feed">
        {{ range .Pages.ByDate.Reverse }}
          {{ $data := dict "title" .Title "type" .Params.type "description" .Summary "date" .Date "url" .RelPermalink "image" .Params.image "featured" false }}
          {{ partial "post-card.html" $data }}
        {{ end }}
      </div>
    {{ else }}
      {{ .Content }}
    {{ end }}
  </div>

  {{ if eq .Type "articles" }}
    <script defer src="{{ resources.Get "js/filters.js" | fingerprint | .RelPermalink }}"></script>
  {{ end }}
{{ end }}