<header>
  <section class="hero has-bg-img is-primary has-text-centered is-large">
    <div class="hero-head mx-5">
      <div class="level subtitle is-5">
        <div class="level-left">
          {{ with .Params.imgLicence }}
          <div class="level-item">
             Image d'illustration {{ . }}
          </div>
          {{ end }}
        </div>
        <div class="level-right">
          <div class="level-item">
            {{ with .Params.categories }}
            <div class="tags colums is-vcentered mb-2 mt-5">
              {{ range . }}
              <span class="tag is-info is-light is-large mr-4"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
              {{ end }}
            </div>
            {{ end }}
          </div>
        </div>
      </div>

    </div>
    <div class="hero-body">
      <p class="title is-1 is-uppercase">{{ .Title }}</p>
      {{ with .Params.subtitle }}
      <p class="subtitle is-2">{{ . }}</p>
      {{ end }}
    </div>
    <!-- Words and date stuff makes sens only for blog posts, not other pages -->
    {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
    <div class="hero-foot mb-5 mx-5">
      <div class="level subtitle is-5">
        <div class="level-left">
          <div class="level-item has-text-left">
            <time class="" datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
              <p class="mb-2">📅&nbsp;&nbsp;Article publié le <strong>{{ .Date.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Date.Month) }} {{ .Date.Year }}</strong></p>
              <p>✏️&nbsp;&nbsp;Dernière modification le <strong>{{ .Lastmod.Day }} {{ index $.Site.Data.months_fr (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Year }}</strong></p>
            </time>
          </div>
        </div>
        <div class="level-right">
          <div class="level-item has-text-right">
            <div>
              <p class="mb-2">🕑&nbsp;&nbsp;Environ <strong>{{ div .FuzzyWordCount 230 }} minutes</strong> de lecture</p>
              <p>#️&nbsp;<strong>{{ .FuzzyWordCount }} mots</strong></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    {{ end }}
  </section>
</header>