{{ define "header" }}
  {{ partial "page-header.html" . }}
  <script src="/js/shuffle.js"></script>
{{ end }}

{{ define "main" }}
  <article class="cf ph3 ph5-l pv3 pv4-l f4 center mw7 lh-copy mid-gray">
    {{ .Content }}
    <div class="flex flex-column items-start flex-row-l">
      {{/* TODO: Should this go to a fixed about page, or a blog post...? */}}
      <a href="{{ relref . "/pages/mission.md" }}"
        class="f5 no-underline black hover-bg-mid-gray hover-white
               pa2 ba br2 border-box b--mid-gray mb3 mb0-l mr4-l">
        More about the mission
      </a>
      <a href="{{ relref . "/catalog/_index.md" }}"
        class="f5 no-underline black hover-bg-mid-gray hover-white
               pa2 ba br2 border-box b--mid-gray mb3 mb0-l mr4-l">
        Explore the catalog
      </a>
      <a href="{{ relref . "/pages/participate.md" }}"
        class="f5 no-underline black hover-bg-mid-gray hover-white
               pa2 ba br2 border-box b--mid-gray mb3 mb0-l mr4-l">
        Get involved
      </a>
    </div>
  </article>
  {{/* Define a section to pull recent posts from. For Hugo 0.20 this will default to the section with the most number of pages. */}}
  {{ $mainSections := .Site.Params.mainSections | default (slice "post") }}
  {{/* Create a variable with that section to use in multiple places. */}}
  {{ $section := where .Site.RegularPages "Section" "in" $mainSections }}
  {{/* Check to see if the section is defined for ranging through it */}}
  {{ $section_count := len $section }}
  {{ if ge $section_count 1 }}
    {{/* Derive the section name  */}}
    {{ $section_name := index (.Site.Params.mainSections) 0 }}

    <div class="pa3 pa4-ns w-100 w-70-ns center mid-gray">
      {{/* Use $section_name to get the section title. Use "with" to only show it if it exists */}}
       {{ with .Site.GetPage "section" $section_name }}
          <h1 class="flex-none">
            {{ $.Param "recent_copy" | default (i18n "recentTitle" .) }}
          </h1>
        {{ end }}

      {{ $n_posts := $.Param "recent_posts_number" | default 3 }}

      <section class="w-100 mw8">
        {{/* Range through the first $n_posts items of the section */}}
        {{ range (first $n_posts $section) }}
          <div class="relative w-100 mb4">
            {{ partial "summary-with-image.html" . }}
          </div>
        {{ end }}
      </section>

      {{ if ge $section_count (add $n_posts 1) }}
        <section class="w-100">
          {{ with .Site.GetPage "section" $section_name }}
            <a href="{{ .RelPermalink }}"
              class="f5 no-underline bg-light-gray hover-bg-moon-gray
                     pa2 ba br2 border-box b--moon-gray mb3">
              {{ $.Param "all_copy" | default (i18n "allTitle" .) }}
            </a>
          {{ end }}
        </section>
      {{ end }}
    </div>
  {{ end }}

  <div class="pa3 pa4-ns w-100 w-70-ns center mid-gray">
    <h1 id="contributors">
      Contributors
    </h1>

    <p class="mb4">
      The Malleable Systems Collective is a virtual community where anyone can
      participate. The following people have contributed to the community in
      various ways as noted by the roles under their names.
    </p>

    <ul class="shuffle grid gtc2 gtc3-l gg1 list pl0">
      {{ range $key, $val := .Site.Data.contributors.contributors }}
      <li id="{{ $key }}">
        <img class="w4 br-100 ba" src="{{ .avatar }}" />
        <h3 class="f4 mv0">{{ .name | default $key }}</h3>
        <div>
          {{ with .website }}
          <a href="{{ . }}"
            target="_blank" rel="noopener" title="Website"
            class="link-transition social link">
            <i class="fa fa-home"></i>
          </a>
          {{ end }}
          {{ with .mastodon }}
          <a href="{{ . }}"
            target="_blank" rel="noopener" title="Mastodon"
            class="link-transition social link">
            <i class="fa fa-mastodon"></i>
          </a>
          {{ end }}
          {{ with .twitter }}
          <a href="https://twitter.com/{{ . }}"
            target="_blank" rel="noopener" title="Twitter"
            class="link-transition social link">
            <i class="fa fa-twitter"></i>
          </a>
          {{ end }}
          {{ with (.github | default $key) }}
          <a href="https://github.com/{{ . }}"
            target="_blank" rel="noopener" title="GitHub"
            class="link-transition social link">
            <i class="fa fa-github"></i>
          </a>
          {{ end }}
        </div>
        <div class="mt1">
        {{ range .roles }}
          <span class="ba br2 border-box b--mid-gray nowrap dib
                       f6 pa1 mb1"
          >{{ . }}</span>
        {{ end }}
        </div>
      </li>
      {{ end }}
    </ul>
  </div>
{{ end }}