{{ define "main" }}
<section>
  {{ range .Pages }}
  <br>
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-md-8">
        <div class="img-pre">
          <a class="text-decoration-none" href="{{ .Permalink }}">
            <img class="img-fluid" alt="{{ .Title }}" src="{{ .Params.bg_image }}">
        </div>
        <div>
          <h2 class="item-title">
            {{ .Title }}
          </h2>
          <!--{{ if .Params.subtitle }}
            <h4 class="item-subtitle text-muted">
              {{ .Params.subtitle }}
            </h4>
            {{ end }}-->
          </a>
        </div>

        <div class="text-muted">
          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar" fill="currentColor"
            xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
              d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z" />
            <path fill-rule="evenodd"
              d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z" />
          </svg>
          {{ dateFormat "Jan 2, 2006" .Date }}

          {{ if .Params.author }}
          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person-fill" fill="currentColor"
            xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
          </svg>
          {{ .Params.author }}
          {{ end }}
        </div>

        <div>
          {{truncate 200 .Summary}}
          <a class="text-decoration-none" href="{{ .Permalink }}">
            <button type="button" class="float-right btn btn-outline-primary read-more">Read more</button>
          </a>
        </div>

        {{ if .Params.tags }}
        <div class="blog-tags">
          <strong class="text-muted">Tags: </strong>
          {{ range .Params.tags }}
          #<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{  . }}</a>
          {{ end }}
        </div>
        {{ end }}

        <div style="color:grey; font-size:16px;">{{ if .Params.categories }}<strong>Categories:</strong>
          {{range .Params.categories}}<a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
          {{end}}{{end}}
        </div>
        <div style="color:grey; font-size:16px;">{{ if .Params.moods }}<strong>Moods:</strong>
          {{range .Params.moods}}<a href="{{ "/moods/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> {{end}}{{end}}
        </div>
      </div>
    </div>
  </div>
  <br>
  {{ end }}
</section>
{{ end }}