<div class="card has-equal-height mt-5">
  <div class="card-image">
    <figure class="image is-3by2">
      {{ $imageURL := "https://bulma.io/images/placeholders/480x320.png" }}
      {{ with .Resources.GetMatch "top.jpg" }}
        {{ $image := .Fill "480x320 left" }}
        {{ $imageURL = $image.Permalink }}
      {{ end }}
      <a href="{{ .Permalink }}"><img src="{{ $imageURL }}" alt="Placeholder image"></a>
    </figure>
  </div>
  <div class="card-content" style="height:100%;">
    <div class="has-text-centered">
      <a class="title is-4" href="{{.Permalink}}">
        <!--
      Well, I am a beginner with Hugo so this is probably like crushing a banana with a rocket.
      When a post belongs to a "case" (i.e. a section with a code, I'd like to have [INDEX/TOTAL] printed in title.
      An when a post is on its own, don't print anything.
      A little bit like : https://www.hacking-social.com/
      But I don't wan't to write it manually because it could break when adding a blog post in between two existing blog posts.
      So, iterate over the blog posts with same section as current blog post, order them by date and save the index of current blog post.
      Maybe there is an easier way to get the same result...
      -->
        {{ $currentPost := . }}
        {{ $currentPostIndex := 1 }}
        {{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
        {{ $postsSorted := (sort $posts "Date" )}}
        {{ range $index, $element := $postsSorted }}
        {{ if eq $element.Title $currentPost.Title }}
        {{ $currentPostIndex = (add $index 1) }}
        {{ end }}
        {{ end }}
        {{ with .CurrentSection.Params.Code }}
        [{{ . }}{{ print $currentPostIndex }}]
        {{ end }}
        {{ .Title }}
      </a>
    </div>
    <hr style="margin: 1rem 0;">
    <!-- If a special summary (before ToC) have been defined,
      prefer using it because it has more chances to be a better summary -->
    {{ if (isset .Params "summary" )}}
      {{ .Params.summary }}
    {{ else }}
      {{ .Content | plainify | safeHTML | truncate 300 "..." }}
    {{ end }}
  </div>
  <footer class="card-footer has-text-centered">
      {{ with .Params.categories }}
      <div class="card-footer-item is-centered is-rounded">
        {{ range . }}
        <span class="tag mx-1"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
        {{ end }}
      </div>
      {{ end }}
      <div class="card-footer-item is-size-7">
        <time datetime="{{ .Date.Format `2006-01-02T15:04:05Z07:00` | safeHTML }}">
          {{ .Date.Day }} {{ slicestr (index $.Site.Data.months_fr (printf "%d" .Date.Month)) 0 3 }} {{ .Date.Year }}
        </time>&nbsp;—&nbsp;{{ div .FuzzyWordCount 230 }} minutes
      </div>
    </footer>
</div>
