{{ define "head"}}
<meta name="description" content="{{ .Params.description }}" />
<title>{{ .Title }}</title>
{{ if eq .Site.Params.version 1 }}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;700&display=swap" rel="stylesheet">
<link href="/css/v1/blog.css" rel="stylesheet">
{{ else if eq .Site.Params.version 2 }}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;700&display=swap" rel="stylesheet">
<link href="/css/v2/post.css" rel="stylesheet">
{{ else if eq .Site.Params.version 3 }}
<link href="/css/v3/post.css" rel="stylesheet">
{{ else }}
{{ end }}
{{ end }}


{{ define "main" }}

{{ if eq .Site.Params.version 3 }}
<section style="font-family: 'Roboto', sans-serif;">
  <div class="container">
    <div class="row blog-page-color">
      <div class="col-md-9 py-4 px-0">
        <div class="rounded shadow bg-light p-3 px-md-5 bg-light">
          <h1 class="pb-2 text-center">{{ .Title }}</h1>
          <article>
            {{.Content}}
          </article>
        </div>
      </div>
      <div class="col-md-3 py-4">
        <div class="bg-light shadow p-4 rounded mb-2 bg-light">
          <h4>Table of content</h4>
          {{.TableOfContents}}
        </div>

        <div class="bg-light shadow p-4 rounded mt-2 bg-light">
          <h4>Share article with</h4>
          <ul>
            <li>
              <a target="blank" class="text-info"
                href="https://twitter.com/share?text={{ .Title }}&url={{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
                Twitter
              </a>
            </li>
            <li>
              <a target="blank" class="text-success"
                href="https://api.whatsapp.com/send?text={{ .Title }}: {{ .Site.Params.hostName }}{{ .Permalink | absURL }}"
                data-action="share/whatsapp/share">
                Whatsapp
              </a>
            </li>
            <li>
              <a class="text-danger" target="blank"
                href="mailto:?subject={{ .Title }}&amp;body=Check out this site {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
                Email
              </a>
            </li>
          </ul>



        </div>
      </div>
      {{ template "_internal/disqus.html" . }}
    </div>
  </div>
</section>
{{ else }}


<section class="mincho-font">
  <div class="py-4 bg-info text-center">
    <div class="container-fluid">
      <!-- title and date -->
      <h1 class="blog-title font-weight-bold">{{.Title}}</h1>
      <div class="">
        <!-- Date -->
        <span class="px-1">
          <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>
        </span>
        {{ dateFormat "Jan 2, 2006" .Date }}

        <!-- Author -->
        {{ if .Params.author }}
        <span class="px-1">
          <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>
        </span>
        {{ .Params.author }}
        {{ end }}

        {{ if .Site.Params.tweet }}

        <div class="pt-3">
          <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-size=large class="twitter-share-button"
            data-show-count="false">Tweet my work</a>
          <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
        {{ end }}
      </div>

      {{ if .Site.Params.showdescription }}
      <div class="text-dark py-2">
        {{ .Params.description }}
      </div>
      {{ end }}
    </div>
  </div>
  <div class="container">
    <div class="row justify-content-center ">
      <div class="col-md-9">
        <div class="">
          <!-- image -->
          <div class="py-2">
            {{ with .Params.bg_image }}
            <img class="img-fluid" src="{{ . }}">
            {{ end }}
          </div>
          {{ if .Params.toc }}
          <div class="row justify-content-center">
            <div class="col-md-8 py-3 px-4">
              <div class="card">
                <button class="TOC btn btn-outline-info py-2 text-center">
                  Table Of Contents
                </button>
                <div class="TOC-content d-none card-body">
                  {{.TableOfContents}}
                </div>
              </div>
            </div>
          </div>
          {{ end }}
          <!-- content -->
          <article>
            {{.Content}}
          </article>
        </div>
        <!-- Tags -->
        <div class="p-5">
          <div class="card">
            <h5 class="card-header text-center m-0">Tags</h5>
            <div class="card-body">
              {{ if .Params.tags }}
              {{ range .Params.tags }}
              <a href={{ "/tags/" | relLangURL }}{{ . | urlize }} class="btn btn-outline-danger btn-rounded mb-2">
                {{ . }}
              </a>
              {{ end }}
              {{ end }}
            </div>
            </a>
          </div>
        </div>

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

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

<script>
  $('.TOC').on('click', function () {
    $('.TOC-content').removeClass('d-none');
  });

</script>
{{ end }}

{{ end }}