 const getUpdates = async (location) => {
    const response = await fetch(
      "https://services.msgsndr.com/blogs/posts/list?locationId=" + location
    );
    return await response.json();
};
 async function fetchUpdates(){

 if (document.querySelector("#app").classList.contains("loading")) {
      setTimeout(fetchUpdates, 100);
      return;
    }
    if (
        $("#canny_logs-toggle1").length == 0 &&
        $(".changelogWidgetContainer1").length == 0
      ) {
        $(`
        
         <style>
.changelogWidgetHeader1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
  min-height: 42px;
}
.changelogWidgetHeader1 .backButton,
.changelogWidgetHeader1 .dismissButton {
  display: flex;
  width: 16px;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  color: #666;
  padding: 12px 20px;
  transition: all 0.1s ease-in-out;
}
.changelogWidgetHeader1 .backButton:hover,
.changelogWidgetHeader1 .dismissButton:hover {
  color: #888;
}
.changelogWidgetHeader1 .backButton .icon,
.changelogWidgetHeader1 .dismissButton .icon {
  display: flex;
}
.changelogWidgetHeader1 .buttonSpacer {
  display: flex;
  width: 16px;
  padding: 12px 20px;
}
.changelogWidgetHeader1 .heading {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #333;
  padding: 12px 20px;
  white-space: nowrap;
}

.changelogWidgetContainer1 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.changelogWidgetFooter1 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #e6e6e6;
}


.changelogWidgetFooter1 .cannyAttribution .attribution:hover {
  color: #777;
}
.changelogWidgetFooter1 .cannyAttribution .links .link,
.changelogWidgetFooter1 .cannyAttribution .links .separator {
  line-height: 15px;
}
.changelogWidgetFooter1 .seeAll {
  font-size: 12px;
  line-height: 15px;
  text-decoration: underline;
  transition: all 0.1s ease-in-out;
}
.changelogWidgetFooter1 .seeAll:hover {
  opacity: 0.8;
}



.changelogWidgetEntryListItem1 {
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}
.changelogWidgetEntryListItem1:hover {
  background-color: #f5f5f5;
}
.changelogWidgetEntryListItem1 .heading {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.changelogWidgetEntryListItem1 .heading .type {
  border-radius: 5px;
  font-size: 11px;
  line-height: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  padding: 3px 6px;
  font-size: 12px;
  margin: 0 10px 6px 0;
}
.changelogWidgetEntryListItem1 .heading .type.new {
  background-color: #6dd345;
}


.changelogWidgetEntryListItem1 .heading .title {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.changelogWidgetEntryListItem1 .details {
  display: flex;
  font-size: 15px;
  line-height: 22px;
  max-height: 40px;
}
.changelogWidgetEntryListItem1 .details .truncate {
  font-size: 14px;
  line-height: 20px;
}



.changelogWidgetHome1 {
  display: flex;
  flex-direction: column;
}
.changelogWidgetHome1 .changelogWidgetEntryListItem {
  border-bottom: 1px solid #e6e6e6;
}
.changelogWidgetHome1 .changelogWidgetEntryListItem:last-child {
  border-bottom: none;
}



	/* customize scrollbar css */
	#scrollbar-custom::-webkit-scrollbar{
		width:6px;
		background-color:#f4f1f1;
	}
	#scrollbar-custom::-webkit-scrollbar:horizontal{
		height:6px;
	}
	#scrollbar-custom::-webkit-scrollbar-track{
		border:1px #787878 solid;
		border-radius:5px;
		-webkit-box-shadow:0 0 6px #c8c8c8 inset;
	}
	#scrollbar-custom::-webkit-scrollbar-thumb{
		background-color:#10b981;
		border:1px solid #000000;
		border-radius:16px;
	}
	#scrollbar-custom::-webkit-scrollbar-thumb:hover{
		background-color:#10b981;
		border:1px solid #333333;
	}
	#scrollbar-custom::-webkit-scrollbar-thumb:active{
		background-color:#10b981;
		border:1px solid #333333;
	}
        .changelogWidgetContainer1 {
            max-height: 999px;
            position: absolute;
            height: 400px;
            width: 40%;
            background: #fff;
            top: 5%;
            right: 10%;
            color: white;
            box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
            z-index : 99999999999999999999 !important;
            border-radius:12px;
        }
    
        a.changelogWidgetEntryListItem.changelogWidgetEntryListItem1{
            border-left-width : 4px !important;
        }
        .entryList.myBlogs {
          max-height: 320px;
          overflow-y: scroll;
padding-bottom:15px;
        }
    
        .changelogWidgetHeader .heading{
            font-size: 18px !important;
        }
    
        .media-simplified {
            display: flex;
            flex-direction: row;
            align-content: stretch;
            justify-content: center;
            align-items: center;
        }
         </style>
         `).appendTo("head");
    
        $(
          `<a href="javascript:void(0);" id="canny_logs-toggle1"  title="View System Updates" class="btn btn-circle btn-changeblog"><img src="https://img.icons8.com/ios-filled/50/3498DB/update-left-rotation.png" height="40" width="40" style="border-radius:100%" /><span class="sr-only">Latest Updates</span></a>`
        ).insertAfter("#canny_logs-toggle");
    
        //$("#canny_logs-toggle").hide();
    
        document.querySelector("body").insertAdjacentHTML(
          "beforeend",
          `
         <div class="changelogWidgetContainer changelogWidgetContainer1" style="max-height:1000px; display:none">
         <div class="changelogWidgetHeader changelogWidgetHeader1">
             <div class="buttonSpacer buttonSpacer1">
             </div>
             <div class="heading">System Updates</div>
             <div class="buttonSpacer"></div>
         </div>
         <div class="scrollContainer scrollContainer1" style="overflow-y:hidden">
             <div class="changelogWidgetHome1 changelogWidgetHome">
                 <div class="entryList myBlogs" id="scrollbar-custom">
                 </div>
             </div>
         </div>
         <div class="changelogWidgetFooter1"><div class="cannyAttribution"><div class="firstLine"><a class="attribution" href="#"></a><ul class="links"><div class="separator">·</div></ul></div></div><a class="seeAll" href="https://www.mediasimplified.io/system-updates" rel="noopener" style="color:#10b981" target="_blank"><span class="media-simplified"> <span class="media-simplified-text" style="font-size:16px; padding-right:3px;">See all updates </span>
         <img src="https://img.icons8.com/ios-glyphs/30/000000/circled-right.png" height="30" width="30"/></span>
         </a></div> 
     </div>
         `
        );
      }
        var blogs = await getUpdates("ynCWf3Y4AEJ7hfQ4lVWE").then((data) => {
            var base_url = "https://www.mediasimplified.io/system-updates/b/";
                data.blogPosts.forEach((blog) => {
                  var blog_url = base_url + blog.urlSlug;
                  var categories = "";
                  if($(`.heading_${blog._id}`).length==0){
                    $(`
                    <a class="changelogWidgetEntryListItem changelogWidgetEntryListItem1" href="${blog_url}" target="_blank"
                         style="border-left-color:#10b981;border-left-style:solid;border-left-width:2px;padding-left:18px">
                        <div class="heading heading_${blog._id}">
                            <div class="title"> ${blog.title} </div>
                        </div>
                        <div class="details">
                            <div class="truncate" style="-webkit-line-clamp:2">${blog.description}</div>
                        </div>
                    </a>
                    `).appendTo(".myBlogs");
                  blog.categories.forEach((category) => {
                    $(".heading_" + blog._id).prepend(
                      `<div class="type new">${category.label}</div>`
                    );
                   });
                  }  
                });
            });
            
            $(document).off("click", "#canny_logs-toggle1");
            $(document).on("click", "#canny_logs-toggle1", function () {
              $(".changelogWidgetContainer1").toggle();
            });
}
window.lastUrl_fetch_updates = location.href;
new MutationObserver(() => {
  if (location.href !== window.lastUrl_fetch_updates) {
    window.lastUrl_fetch_updates = location.href;
    setTimeout(async function(){
        fetchUpdates();
    },500);
  }
}).observe(document, {
  subtree: true,
  childList: true,
});