{{ define "main" }}
<section>
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-md-8">

        <!-- title and date -->
        <div>
          <br>
          <h1>{{.Title}}</h1>
          <div class="text-muted">

            <!-- Date -->
            <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 }}

            <!-- Author -->
            {{ 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 }}

            <!-- Edit in Github -->
            {{ if .Params.github_link }}
            <a href="{{ .Params.github_link }}" target="_blank" title="Edit on github">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil float-right" fill="currentColor"
                xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd"
                  d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" />
                <path fill-rule="evenodd"
                  d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z" />
              </svg>
            </a>
            {{ end}}

          </div>
        </div>

        <!-- image -->
        <br>
        <div>
          {{ with .Params.bg_image }}
          <img class="img-fluid" src="{{ . | absURL }}">
          {{ end }}
        </div>

        <!-- content -->
        <br>
        <div>{{.Content}}</div>

        <!-- Tags -->
        <div class="text-center text-muted">
          <hr>
          <div class="h4">Tags</div>
          {{ if .Params.tags }}
          {{ range .Params.tags }}
          <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
            <button class="btn rounded-pill border border-info">{{ . }}</button>
          </a>
          {{ end }}
          {{ end }}
        </div>
        <br>

      </div>
    </div>
  </div>
</section>
{{ end }}