{{ define "main" }}
<div class="section">
  <!--
  If the current page is a blog post and belongs to a thematic serie, we will add a side menu
  with all other blog posts belonging to that case, emphasis to the current.
  Still use empty container if nothing to show for homogeneous layout
  -->
  <!-- is-desktop stacks vertically columns for tablets and mobiles. is-8 is a
  maximum gap of 2rem between columns -->
  <div class="columns is-variable is-desktop is-8">
    <!-- To ease reading, the content is a bit wider for small screens
    but not too wide for big screens -->
    <aside class="menu column mt-2 is-one-fifth-desktop is-one-quarter-fullhd is-full-tablet is-full-mobile">
      {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
      {{ with .CurrentSection }}
      {{ if .Params.Title }}
      <p class="menu-label">
        <a href="{{ .Permalink }}">{{ .Params.Title }}</a>
      </p>
      <div class="menu-list">
        {{ $posts := (where $.Site.RegularPages "CurrentSection.Params.Code" "==" $.CurrentSection.Params.Code )}}
        {{ $postsSorted := (sort $posts "Date" )}}
        {{ range $postsSorted }}
        <a {{ if eq $.Title .Title }} class="is-active" {{ end }} href="{{ .Permalink }}">{{ .Title }}</a>
        {{ end }}
      </div>
      {{ end }}
      {{ end }}
      {{ end }}
    </aside>
    <section class="column content is-three-fifths-desktop is-half-fullhd is-full-tablet is-full-mobile">
      <div>
        <article>
          <!-- If this is part of a thematic serie, remind it so it is clear -->
          {{ if (and .IsPage (eq .FirstSection.Section "posts"))}}
          {{ with .CurrentSection }}
          {{ if .Params.Title }}
          <div class="message is-info">
            <div class="message-body content">
              Le post que vous lisez fait partie du dossier « <a href="{{ .Permalink }}">{{ .Params.Title }}</a> ». Le
              menu sur la gauche permet de naviguer entre ses billets. Bonne lecture ! 😄
            </div>
          </div>
          {{ end }}
          {{ end }}
          {{ end }}
          <!-- First thing is a legend for the hero image, if it exists -->
          {{ with .Params.imgExplanation }}
          <div class="message">
            <div class="message-body content is-italic">
              {{ . }}
            </div>
          </div>
          {{ end }}
          <!-- Second, an introductive message before ToC, if it exists -->
          {{ with .Params.intro | markdownify | safeHTML }}
          <div class="message is-dark">
            <div class="message-body">
              {{ . }}
            </div>
          </div>
          {{ end }}
          <!-- Then, ToC if text has more than 600 words and not explicitly asked not to -->
          {{ if (and (not .Params.notoc) (gt .WordCount 600)) }}
          <div class="message is-link">
            <div class="message-header">Sommaire</div>
            <!-- Appreciate this horrible trick, even a 2000's HTML generator won't generate such code -->
            <div class="message-body has-text-left pt-1">
              {{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
          </div>
          {{ end }}
          <!-- Finally, content! -->
          {{ .Content }}
        </article>
      </div>
      <hr />
    </section>
  </div>
</div>
{{ end }}