{{ define "header" }}
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}" />
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
/>
<link rel="stylesheet" href="{{ "/css/layouts/single.css" | relURL }}"/>
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL }}">
<!--================= custom style overrides =========================-->
<link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>

{{ end }}

{{ define "navbar" }}
    {{ partial "navigators/navbar-2.html" . }}
{{ end }}

{{ define "sidebar" }}
  <section class="sidebar-section" id="sidebar-section">
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
            <li id="list-heading"><a href="{{ "/posts" | relLangURL }}" data-filter="all">{{ i18n "posts" }}</a></li>
            <div class="subtree">
                {{ partial "navigators/sidebar.html" (dict "menuName" "sidebar" "menuItems" site.Menus.sidebar "ctx" .) }}
            </div>
          </ul>
        </div>
      </div>
    </div>
  </section>
{{ end }}

{{ define "content" }}
<section class="content-section" id="content-section">
  <div class="content">
    <div class="container p-0 read-area">
      <!--Hero Area-->
      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
      </div>

      <!--Content Start-->
      <div class="page-content">
        <div class="author-profile ml-auto align-self-lg-center">
          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
          <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
          <p>{{ .Page.Date.Format "January 2, 2006" }}</p>
        </div>

        <div class="title">
          <h1>{{ .Page.Title }}</h1>
        </div>
        {{ if site.Params.enableTags }}
        <div class="taxonomy-terms">
            <ul>
            {{ range .Params.tags }}
            {{ $url:= printf "tags/%s" . }}
            <li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
            {{ end }}
          </ul>
        </div>
        {{ end }}
        <div class="post-content" id="post-content">
          {{ .Page.Content }}
        </div>

        <!-- Share or Contribute -->
        <div class="row pl-3 pr-3">
        <!--Social Media Share Buttons-->
        <div class="col-md-6 share-buttons">
        {{ if site.Params.features.blog.shareButtons }}
            <strong>{{ i18n "share_on" }}:</strong>
            {{ if site.Params.features.blog.shareButtons.facebook }}
            <a class="btn btn-sm facebook-btn" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank">
              <i class="fab fa-facebook"></i>
            </a>
            {{ end }}
            {{ if site.Params.features.blog.shareButtons.twitter }}
                <a class="btn btn-sm twitter-btn" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank">
                  <i class="fab fa-twitter"></i>
                </a>
            {{ end }}
            {{ if site.Params.features.blog.shareButtons.reddit }}
                <a  class="btn btn-sm reddit-btn" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                  <i class="fab fa-reddit"></i>
                </a>
            {{ end }}
            {{ if site.Params.features.blog.shareButtons.tumblr }}
                <a class="btn btn-sm tumblr-btn" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank">
                  <i class="fab fa-tumblr"></i>
                </a>
            {{ end }}
            {{ if site.Params.features.blog.shareButtons.pocket }}
                <a class="btn btn-sm pocket-btn" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                  <i class="fab fa-get-pocket"></i>
                </a>
            {{ end }}
            {{ if site.Params.features.blog.shareButtons.linkedin }}
                <a class="btn btn-sm linkedin-btn" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
                  <i class="fab fa-linkedin"></i>
                </a>
            {{ end }}
            {{ if site.Params.features.blog.shareButtons.diaspora }}
                <a class="btn btn-sm diaspora-btn" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank">
                  <i class="fab fa-diaspora"></i>
                </a>
            {{ end }}
             {{ if site.Params.features.blog.shareButtons.mastodon }}
                <a class="btn btn-sm mastodon-btn" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank">
                  <i class="fab fa-mastodon"></i>
                </a>
            {{ end }}
            {{ if site.Params.features.blog.shareButtons.whatsapp }}
                 <a class="btn btn-sm whatsapp-btn" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank">
                  <i class="fab fa-whatsapp"></i>
                </a>
            {{ end }}
            {{ if site.Params.features.blog.shareButtons.email }}
                <a class="btn btn-sm email-btn" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank">
                  <i class="fas fa-envelope-open-text"></i>
                </a>
            {{ end }}
          {{ end }}
          </div>

        <!--- Improve this page button --->
        {{ if site.Params.GitRepo }}
          {{ if site.Params.GitBranch }}
            {{ .Scratch.Set "GitBranch" site.Params.GitBranch }}
          {{ else }}
            {{ .Scratch.Set "GitBranch" "main" }}
          {{ end }}
          <div class="col-md-6 btn-improve-page">
            {{ if ( eq site.Params.GitForge "gitlab" ) }}
              <a href="{{ site.Params.GitRepo }}/-/edit/{{ .Scratch.Get "GitBranch" }}/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
            {{ else if ( eq site.Params.GitForge "gitea" ) }}
              <a href="{{ site.Params.GitRepo }}/_edit/{{ .Scratch.Get "GitBranch" }}/content/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
            {{ else }} <!--- Make Github-style the default -->
               <a href="{{ site.Params.GitRepo }}/edit/{{ .Scratch.Get "GitBranch" }}/content/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
            {{ end }}
                <i class="fas fa-code-branch"></i>
                {{ i18n "improve_this_page" }}
              </a>
          </div>
        {{ end }}
        </div>



      <!---Next and Previous Navigator -->
      <hr />
        {{ partial "navigators/next-prev-navigator.html" . }}
      <hr />

      <!----- Add comment support  ----->
      {{ with site.Params.features.comment }}
        {{ if .enable }}
          <!-- Add Disqus forum  -->
          {{ if .disqus.shortName }}
              {{ partial "disqus.html" . }}
          <!-- Add valine -->
          {{ else if .valine }}
              {{ partial "valine.html" . }}
          {{ end }}
        {{ end }}
      {{ end }}
      <!-- Keep backward compatibility with old config.yaml -->
      {{ if site.DisqusShortname }}
        {{ partial "disqus.html" . }}
      {{ end }}

      </div>
    </div>
  </div>
  <!--scroll back to top-->
  <a id="scroll-to-top" class="btn"><i class="fas fa-chevron-circle-up"></i></a>
  {{ if .IsTranslated }}
    {{ partial "navigators/floating-lang-selector.html" . }}
  {{ end }}
</section>
{{ end }}

{{ define "toc" }}
  <section class="toc-section" id="toc-section">
    {{ if site.Params.enableTOC }}
    <div class="toc-holder">
      <h5 class="text-center pl-3">{{ i18n "toc_heading" }}</h5>
      <hr>
      <div class="toc">
        {{ .TableOfContents }}
      </div>
    </div>
    {{ end }}
  </section>
{{ end }}

{{ define "scripts" }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script src="{{ "/js/single.js" | relURL }}"></script>
<script>
  hljs.initHighlightingOnLoad();
</script>
{{ if .Params.math }}
    {{ partial "math.html" . }}
{{ end }}
{{ end }}