{{ define "head" }}
<meta name="description" content="{{ .Params.description }}">
<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/single.css">

<!-- fontawesome -->
<script defer src="{{.Site.Params.staticPath}}/fontawesome-6/all-6.4.2.js"></script>
{{ end }}

{{ define "title" }}
{{.Title }} | {{ .Site.Title }}
{{ end }}

{{ define "main" }}
<section id="single">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-sm-12 col-md-12 col-lg-9">
        <div class="pr-lg-4">
          <div class="title mb-5">
            <h1 class="text-center mb-4">{{ .Title }}</h1>
            <div class="text-center">
              {{ .Date.Format (.Site.Params.datesFormat.article | default "Jan 2, 2006") }}

              {{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}
              <span id="readingTime">
                {{ .Site.Params.singlePages.readTime.content | default "min read" }}
              </span>
              {{ end }}
            </div>
          </div>
          {{ if .Params.image }}
          <div class="featured-image">
            <img class="img-fluid mx-auto d-block" src="{{ .Params.image }}" alt="{{ .Title }}">
          </div>
          {{ end }}
          <article class="page-content  p-2">
          {{ .Content | emojify }}
          </article>
        </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-3">
        <div id="stickySideBar" class="sticky-sidebar">
          {{ if .Params.toc | default false}}
          <aside class="toc">
              <h5>
                {{ .Site.Params.terms.toc | default "Table Of Contents" }}
              </h5>
              <div class="toc-content">
                {{.TableOfContents}}
              </div>
          </aside>
          {{ end }}

          {{ if .Params.tags }}
          <aside class="tags">
            <h5>{{ .Site.Params.terms.tags | default "Tags" }}</h5>
            <ul class="tags-ul list-unstyled list-inline">
              {{range .Params.tags}}
              <li class="list-inline-item"><a href="{{`tags` | absURL}}/{{.| urlize}}" target="_blank">{{.}}</a></li>
              {{end}}
            </ul>
          </aside>
          {{end}}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-9 p-4">
        {{ template "_internal/disqus.html" . }}
      </div>
    </div>
  </div>
  <button class="p-2 px-3" onclick="topFunction()" id="topScroll">
    <i class="fas fa-angle-up"></i>
  </button>
</section>

{{ if or (.Site.Params.singlePages.scrollprogress.enable | default true) (.Params.enableScrollProgress) }}
<div class="progress">
  <div id="scroll-progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<Script src="{{.Site.Params.staticPath}}/js/scrollProgressBar.js"></script>
{{ end }}

<script>
  var topScroll = document.getElementById("topScroll");
  window.onscroll = function() {scrollFunction()};

  function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      topScroll.style.display = "block";
    } else {
      topScroll.style.display = "none";
    }
  }

  function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }

  // To set height of sticky sidebar dynamically
  let stickySideBarElem = document.getElementById("stickySideBar");
  let stickyNavBar = {{ .Site.Params.navbar.stickyNavBar.enable | default false }};
  if(stickyNavBar) {
    let headerElem = document.getElementById("profileHeader");
    let headerHeight = headerElem.offsetHeight + 15;
    stickySideBarElem.style.top = headerHeight + "px";
  } else {
    stickySideBarElem.style.top = "50px";
  }
</script>

{{ if or (.Site.Params.singlePages.readTime.enable | default true) (.Params.enableReadingTime) }}
<script src="{{.Site.Params.staticPath}}/js/readingTime.js"></script>
{{end}}

{{ end }}