<template>
  <div>
    <slot />
    <div class="progress-wrap">
      <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: 'Blog details Sidebar Right || Avigo Multipurpose Theme',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
  ],
  link: [
    { rel: 'stylesheet', href: '/assets/css/bootstrap.min.css' },
    { rel: 'stylesheet', href: '/assets/css/font-awesome-pro.css' },
    { rel: 'stylesheet', href: '/assets/css/magnific-popup.css' },
    { rel: 'stylesheet', href: '/assets/css/owl.carousel.min.css' },
    { rel: 'stylesheet', href: '/assets/css/slick-slider.css' },
    { rel: 'stylesheet', href: '/assets/css/meanmenu.css' },
    { rel: 'stylesheet', href: '/assets/css/typography.css' },
    { rel: 'stylesheet', href: '/assets/css/preloader.css' },
    { rel: 'stylesheet', href: '/assets/css/mobile-menu.css' },
    { rel: 'stylesheet', href: '/assets/css/header.css' },
    { rel: 'stylesheet', href: '/assets/css/footer.css' },
    { rel: 'stylesheet', href: '/assets/css/aos.css' },
    { rel: 'stylesheet', href: '/assets/css/fonts.css' },
    { rel: 'stylesheet', href: '/assets/css/blog-page.css' },
    { rel: 'stylesheet', href: '/assets/css/nice-select.css' },
    { rel: 'stylesheet', href: '/assets/css/modal-video.min.css' },
    { rel: 'stylesheet', href: '/assets/css/responsive.css' },
    { rel: 'stylesheet', href: '/assets/css/comon.css' },
    { rel: 'stylesheet', href: '/assets/css/avigo-unit.css' },
    { rel: 'stylesheet', href: '/assets/css/avigo-core.css' },
    { rel: 'stylesheet', href: '/style.css' }
  ],
  script: [
    { src: '/assets/js/jquery-3-6-0.min.js', defer: true },
    { src: '/assets/js/bootstrap.min.js', defer: true },
    { src: '/assets/js/fontawesome.js', defer: true },
    { src: '/assets/js/owl.carousel.min.js', defer: true },
    { src: 'https://unpkg.com/aos@next/dist/aos.js', defer: true, crossorigin: 'anonymous' },
    { src: '/assets/js/jquery.magnific-popup.min.js', defer: true },
    { src: 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js', defer: true, crossorigin: 'anonymous' },
    { src: 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js', defer: true, integrity: 'sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3', crossorigin: 'anonymous' },
    { src: '/assets/js/slick-slider.js', defer: true },
    { src: '/assets/js/mobile-menu.js', defer: true },
    { src: '/assets/js/tilt.jquery.js', defer: true },
    { src: '/assets/js/jquery.lineProgressbar.js', defer: true },
    { src: '/assets/js/jquery.nice-select.js', defer: true },
    { src: '/assets/js/mobile-meanmenu.js', defer: true },
    { src: '/assets/js/modal-video.min.js', defer: true },
    { src: '/assets/js/main.js', defer: true },
  ]
})

onMounted(() => {
  // page-progress
  var progressPath = document.querySelector(".progress-wrap path");
  if (progressPath) {
    var pathLength = progressPath.getTotalLength();
    progressPath.style.transition = progressPath.style.WebkitTransition =
      "none";
    progressPath.style.strokeDasharray = pathLength + " " + pathLength;
    progressPath.style.strokeDashoffset = pathLength;
    progressPath.getBoundingClientRect();
    progressPath.style.transition = progressPath.style.WebkitTransition =
      "stroke-dashoffset 10ms linear";
    var updateProgress = function () {
      var scroll = $(window).scrollTop();
      var height = $(document).height() - $(window).height();
      var progress = pathLength - (scroll * pathLength) / height;
      progressPath.style.strokeDashoffset = progress;
    };
    updateProgress();
    $(window).scroll(updateProgress);
    var offset = 50;
    var duration = 550;
    jQuery(window).on("scroll", function () {
      if (jQuery(this).scrollTop() > offset) {
        jQuery(".progress-wrap").addClass("active-progress");
      } else {
        jQuery(".progress-wrap").removeClass("active-progress");
      }
    });
    jQuery(".progress-wrap").on("click", function (event) {
      event.preventDefault();
      jQuery("html, body").animate({ scrollTop: 0 }, duration);
      return false;
    });
  }
})
</script>
