{{ define "main" }}
<div class="col-xs-12 col-sm-8 col-md-9 content-column">
  {{ partial "mobile_nav_toggle.html" . }}
  <div class="row">
    <div class="col-lg-8">
      <article>

        <header>
         <h1>{{ .Title }}</h1>
          <h5>
            <span style="color: grey;">
              <span title="Created Date">
                      <i class='fa fa-calendar'></i>&nbsp;{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
                  </span>

                {{ if (not .Params.disableComments) }}
                  &nbsp;|&nbsp;
                  <span title="Comments">
                    <i class="fa fa-comments-o"></i>&nbsp;<a href="{{ .Permalink }}#commento"></a>
                </span>
                {{ end }}
          </span>
        </h5>
        <hr/>
        </header>

        <!-- thanks https://www.godo.dev/tutorials/hugo-image-figure-wrap/ -->
        {{ $reAltIn := "<p><img src=\"([^\"]+)\" alt=\"([^\"]*)\" /></p>" }}
        {{ $reAltOut := "<figure><a href=\"$1\" class=\"lbox\"><img src=\"$1\" alt=\"$2\"></a></figure>" }}
        {{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }}

        {{ $reAltTitleIn := "<p><img src=\"([^\"]+)\" alt=\"([^\"]*)\" title=\"([^\"]+)\" /></p>" }}
        {{ $reAltTitleOut := "<figure><a href=\"$1\" class=\"lbox\"><img src=\"$1\" title=\"$3\"></a><figcaption>$3</figcaption></figure>" }}
        {{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}

        {{ $finalContent }}

         {{ if isset $.Params "tags" }}
          <div class="categories">
          Categorized under: 
          {{ range .Params.tags }}
              <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
          {{ end }}
         {{ end }}
         </div>


        {{ if (not .Params.disableComments) }}
          <hr/>
          <h4 class="page-header"><i class="fa fa-comments-o"></i>&nbsp;
              Join the Discussion
          </h4>        

        {{- if (ne hugo.Environment "development") }}
          <script defer src="https://commento.jefklakscodex.com/js/commento.js"></script>
          <script src="https://commento.jefklakscodex.com/js/count.js"></script>
        {{- else }}
          (localhost, commento not loaded)
        {{- end }}
          <div id="commento"></div>

        {{ end }}

      </article>
    </div>
  </div>
</div>
{{ end }}