{{ define "head"}}
<meta name="description" content="{{ .Params.description }}" />
<title>{{ .Title }}</title>
<style>
  article {
    font-family: 'Peddana', serif;
    line-height: 1.3;
    font-size: 30px;
  }

  article blockquote {
    margin: 0 !;
    border-left: 4px solid #248aaa !important;
    background-color: #248baa15 !important;
    padding: 0.3rem !important;
    padding-left: 1rem !important;
  }

  article blockquote>p {
    color: #3c4858 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  article h1 {
    font-size: 55px !important;
  }

  article h2 {
    font-size: 42px !important;
  }

  article h3 {
    font-size: 35px !important;
  }

  article h4,
  h5,
  h6 {
    font-size: 30px !important;
  }

  article table {
    border-radius: 0.1rem;
    background: #e5e9f2;
    border: 1px solid #c0ccda;
    padding: 0.1rem;
  }

  article table tr {
    height: 40px !important;
  }

  article table th,
  td {
    padding: 0.5rem;
    border-left: 1px solid #8392a5;
    border-bottom: 1px solid #8392a5;
  }

  article table thead tr {
    background: #248aaa;
    color: #e5e9f2;
  }

  article tbody tr:nth-child(odd) {
    background-color: #e5e9f2;
  }

  article tbody tr:hover {
    background: #c0ccda;
  }

  article img {
    width: 100%;
  }

  article caption,
  figcaption {
    caption-side: bottom;
    text-align: center;
    color: #8392a5;
  }

  article pre {
    margin: 5px;
    padding: 5%;
    font-size: 18px;
    max-height: 400px;
    border-radius: 2%;
    background-color: #1f618d !important;
    color: white;
  }

  article pre>code {
    padding: 10px !important;
  }

  article a.header-anchor {
    text-decoration: none;
    color: #1c2d41;
  }

  article a.header-anchor i {
    font-size: 10pt;
    color: #3c4858;
    display: none;
    margin-left: 0.5rem;
  }

  article a.header-anchor:hover i {
    display: inline-block;
  }

  article a.header-anchor code {
    color: #e83e8c;
  }

  article kbd {
    background-color: #248aaa !important;
    color: #f9fafc;
  }

  article mark {
    background-color: #ffc21280;
  }
</style>

{{ end }}


{{ define "main" }}

<section class="bg-white">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-md-8">
        <!-- title and date -->
        <div class="p-2">
          <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>

          {{ if .Site.Params.showdescription }}
          <div class="text-dark py-2">
            {{ .Params.description }}
          </div>
          {{ end }}
        </div>

        <div>
          {{ $siteUrl := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
          {{ $.Scratch.Add "sitePath" .Site.BaseURL }}

          {{ $.Scratch.Add "siteBreadcrumbs" (slice (dict "url" .Site.BaseURL "name" "home" "position" 1 )) }}
          {{ range $index, $element := split $siteUrl "/" }}
          {{ $.Scratch.Add "sitePath" $element }}
          {{ $.Scratch.Add "sitePath" "/" }}
          {{ if ne $element "" }}
          {{ $.Scratch.Add "siteBreadcrumbs" (slice (dict "url" ($.Scratch.Get "sitePath") "name" . "position" (add $index 2))) }}
          {{ end }}
          {{ end }}

          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              {{ range $.Scratch.Get "siteBreadcrumbs" }}
              <li class="breadcrumb-item" aria-current="page"><a href="{{ .url }}"> {{ .name }} </a></li>
              {{ end }}
          </nav>
        </div>
        <!-- image -->
        <div class="py-2">
          {{ with .Params.bg_image }}
          <img class="img-fluid" src="{{ . }}">
          {{ end }}
        </div>

        <!-- content -->
        <article>
          {{.Content}}
        </article>

        <!-- Tags -->
        <div class="mb-4 p-5">
          <div class="card">
            <h5 class="card-header m-0">Tags</h5>
            <div class=" card-body">
              {{ if .Params.tags }}
              {{ range .Params.tags }}
              <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="btn btn-info btn-rounded mb-2">{{  . }}</a>
              {{ end }}
              {{ end }}
            </div>
            </a>
          </div>
        </div>


        {{ template "_internal/disqus.html" . }}

      </div>
    </div>
  </div>

  {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
  {{ $.Scratch.Add "path" .Site.BaseURL }}

  {{ $.Scratch.Add "breadcrumb" (slice (dict "url" .Site.BaseURL "name" "home" "position" 1 )) }}
  {{ range $index, $element := split $url "/" }}
  {{ $.Scratch.Add "path" $element }}
  {{ $.Scratch.Add "path" "/" }}
  {{ if ne $element "" }}
  {{ $.Scratch.Add "breadcrumb" (slice (dict "url" ($.Scratch.Get "path") "name" . "position" (add $index 2))) }}
  {{ end }}
  {{ end }}

  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{{ range $.Scratch.Get "breadcrumb" }}{{ if ne .position 1 }},{{ end }}{
          "@type": "ListItem",
          "position": {{ .position }},
          "item": {
            "@id": "{{ .url }}",
            "name": "{{ .name }}"
          }
      }{{ end }}]
  }
  </script>
</section>
{{ end }}