{{- $footer       := .Site.Params.footer }}
{{- $logo         := index $footer "logo" }}
{{- $productLinks := index $footer "product" }}
{{- $docLinks     := index $footer "docs" }}
{{- $blogrollLinks:= index $footer "blogroll" }}
{{- $socialMedia  := index $footer "socialmedia" }}
{{- $bulmaLogo    := index $footer "bulmalogo" }}
<footer class="footer footer-dark">
  <div class="container">
    <div class="columns">
      <div class="column">
        <div class="footer-logo">
          <img src="{{ printf "/images/logos/%s" $logo | relURL }}">
        </div>
      </div>
      <div class="column">
        <div class="footer-column">
          <div class="footer-header">
              <h3>Product</h3>
          </div>
          <ul class="link-list">
            {{- range $productLinks }}
            <li>
              <a href="{{ .link }}">
                {{ .text }}
              </a>
            </li>
            {{- end }}
          </ul>
        </div>
      </div>
      <div class="column">
        <div class="footer-column">
          <div class="footer-header">
            <h3>Docs</h3>
          </div>
          <ul class="link-list">
            {{- range $docLinks }}
            <li>
              <a href="{{ .link }}">
                {{ .text }}
              </a>
            </li>
            {{- end }}
          </ul>
        </div>
      </div>
      <div class="column">
        <div class="footer-column">
          <div class="footer-header">
            <h3>Blogroll</h3>
          </div>
          <ul class="link-list">
            {{- range $blogrollLinks }}
            <li>
              <a href="{{ .link }}">
                {{ .text }}
              </a>
            </li>
            {{- end }}
          </ul>
        </div>
      </div>
      <div class="column">
        <div class="footer-column">
          <div class="footer-header">
            <h3>Follow Us</h3>
            <nav class="level is-mobile">
              <div class="level-left">
                {{- range $socialMedia }}
                <a class="level-item" href="{{ .link }}">
                  <span class="icon"><i class="fa fa-{{ .icon }}"></i></span>
                </a>
                {{- end }}
              </div>
            </nav>

            {{- if $bulmaLogo }}
            <a href="https://bulma.io" target="_blank">
              <img src="{{ "/images/logos/made-with-bulma.png" | relURL }}" alt="Made with Bulma" width="128" height="24">
            </a>
            {{- end }}
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>