{{ define "main" }}
{{ $pages := where .Site.RegularPages "Params.plain" "ne" true }}
    <section class="everydayfeed">
    <div class="section-content">
      <h2 class="section-head">{{ i18n "latestArticles" }}</h2>
      <ul role="list" class="section-tiles">
        {{ range first 1 $pages }}
          {{ $level := 1 }}
          {{ partial "tile.html" (dict "context" . "level" $level) }}
        {{ end }}

        {{ range first 4 ( after 1 $pages) }}
          {{ $level := 2 }}
          {{ partial "tile.html" (dict "context" . "level" $level) }}
        {{ end }}

        {{ range first 6 ( after 5 $pages) }}
          {{ $level := 3 }}
          {{ partial "tile.html" (dict "context" . "level" $level) }}
        {{ end }}
      </ul>
    </div>
  </section>
{{- if site.Params.ShowMore -}}
  <section class="more-from-newsroom">
    <div class="section-content">
      <h2 class="section-head">{{ i18n "moreArticles" }}</h2>
      <ul role="list" class="section-tiles">

      {{ range first 6 $pages }}
          {{ partial "moreTile.html" (dict "context" .) }}
        {{ end }}
      </ul>
      <div class="view-archive-wrapper">
        <a href="{{ "posts" | relURL }} " class="cta-primary-light" data-analytics-region="router" data-analytics-title="view archive">{{ i18n "viewArchive"}}</a>
      </div>
    </div>
  </section>
{{- end -}}
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var script = document.createElement("script");
        script.src = {{ "js/animation.js" | relURL  }};
        document.head.appendChild(script);

        script.onload = function () {
          console.log("lazyload.js loaded");
          // when layout is loaded, load the images
          initImage();
        };
      });
    </script>
{{ end }}