{{ define "head" }}
<meta name="description" content="{{ .Params.description }}">
<!-- <link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/single.css"> -->
<meta property="og:image" content="{{ .Params.image }}"/>
<!-- fontawesome -->
<!-- <script defer src="{{.Site.Params.staticPath}}/fontawesome-6/all-6.4.2.js"></script> -->
{{ end }}

{{ define "title" }}
{{.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">
              {{ .Params.author }} 
              <small>|</small>
              {{ .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 class="text-center">
              {{ if .Params.explicitLastMod  }}
              <p>{{ .Site.Params.editedOnText }}: {{ .Params.explicitLastMod | time.Format "January 2, 2006" }}</p>
              {{ end }}
            </div>
          </div>
          {{ if .Params.image }}
                <div class="featured-image">
                  {{ $img := .Resources.GetMatch .Params.image }}
                  <!-- <img src="{{ $img }}" class="card-img-top" alt="{{ .Title }}" fetchpriority="high"> -->
                  {{ partial "lazyimg" (dict "img" $img "class" "img-fluid mx-auto d-block" "alt" .Title) }}                
                </div>
          {{ end }}
          <article class="page-content  p-2">
          {{ .Content | emojify }}
          <hr>
          <div id="load_comments" style="text-align:center; display:block;">
            <button onclick="toggleComments()">
              {{ partial "icon" (dict "icon" "comments" "class" "fa-solid fa-comments") }} 
              View Comments</button>
          </div>
          <h2 id="comments_header" style="display:none;">Comments</h2>
          <div id="cusdis_thread"
            data-host="https://cusdis.com"
            data-app-id="fdd898fc-afd5-4280-9cb3-6dd7a1a05e17"
            data-page-id="{{ .Permalink }}"
            data-page-url="{{ .Permalink }}"
            data-page-title="{{ .Params.Title }}"
            data-theme="dark"
            style="min-height:50vh;
                   display: none;  
                   resize: vertical;
                   overflow: auto;"
          ></div>
          <div id="hide_comments" style="text-align:center; display:none;">
            <br>
            <button onclick="toggleComments()">
              {{ partial "icon" (dict "icon" "comments" "class" "fa-solid fa-comments") }} 
              Hide Comments
            </button>
          </div>
          </article>
        </div>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-3">
        <div id="stickySideBar" class="sticky-sidebar">
          {{ if .Params.toc | default true}}
          <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="{{ (printf "tags/%s" . | urlize | relLangURL) }}" target="_blank">{{ . }}</a>
              </li>
              {{end}}
            </ul>
          </aside>
          {{end}}

          {{ if .Params.socialShare | default true }}
          <aside class="social">
            <h5>{{ .Site.Params.terms.social | default "Social" }}</h5>
            <div class="social-content">
              <ul class="list-inline">
                <li class="list-inline-item text-center">
                  <a target="_blank" href="https://twitter.com/share?text={{ .Title }}&url={{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
                    {{ partial "icon" (dict "icon" "twitter" "class" "fab fa-twitter") }}
                  </a>
                </li>
                <li class="list-inline-item text-center">
                  <a target="_blank" href="https://api.whatsapp.com/send?text={{ .Title }}: {{ .Site.Params.hostName }}{{ .Permalink | absURL }}">
                    {{ partial "icon" (dict "icon" "whatsapp" "class" "fab fa-whatsapp") }}
                  </a>
                </li>
                <li class="list-inline-item text-center">
                  <a target="_blank" href='mailto:?subject={{ .Title }}&amp;body={{ .Site.Params.terms.emailText | default "Check out this site" }} {{ .Site.Params.hostName }}{{ .Permalink | absURL }}'>
                    {{ partial "icon" (dict "icon" "envelope" "class" "fa fa-envelope") }}
                  </a>
                </li>
              </ul>
            </div>
          </aside>
          {{ end }}
        </div>
      </div>
    </div>
  </div>
<button class="p-2 px-3" onclick="topFunction()" id="topScroll">
  {{ partial "icon" (dict "icon" "angle-up" "class" "fas fa-angle-up") }}
</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>

<script>
  function toggleComments() {
      var cusdisThread = document.getElementById('cusdis_thread');
      cusdisThread.style.display = cusdisThread.style.display === 'flex'? 'none' : 'flex';

      var loadComments = document.getElementById('load_comments');
      loadComments.style.display = loadComments.style.display === 'block' ? 'none' : 'block';

      var commentsHeader = document.getElementById('comments_header');
      commentsHeader.style.display = commentsHeader.style.display === 'block' ? 'none' : 'block';

      var hideComments = document.getElementById('hide_comments');
      hideComments.style.display = hideComments.style.display === 'block' ? 'none' : 'block';

      var script = document.getElementById('cusdis_script');
      if(script === null)
      {
        var script = document.createElement('script');
        script.src = 'https://cusdis.com/js/cusdis.es.js';
        script.async = false;
        script.defer = false;
        script.id = 'cusdis_script';
        document.body.appendChild(script);
      }
  }
</script>

{{ if .Site.Params.kofi.enable | default true }}
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script>
  kofiWidgetOverlay.draw('{{ .Site.Params.kofi.handle | default "kovasky" }}', {
    'type': 'floating-chat',
    'floating-chat.donateButton.text': '{{ .Site.Params.kofi.buttonText | default "Support me" }}',
    'floating-chat.donateButton.background-color': '#f45d22',
    'floating-chat.donateButton.text-color': '#fff'
  });
</script>
{{ end }}

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

{{ end }}