<div th:fragment="navbar" class="mx-auto">
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const defaultLocale = document.documentElement.lang || 'en_GB';
        const storedLocale = localStorage.getItem('languageCode') || defaultLocale;
        const dropdownItems = document.querySelectorAll('.lang_dropdown-item');

        for (let i = 0; i < dropdownItems.length; i++) {
            const item = dropdownItems[i];
            item.classList.remove('active');
            if (item.dataset.languageCode === storedLocale) {
                item.classList.add('active');
            }
            item.addEventListener('click', handleDropdownItemClick);
        }
    });

    function handleDropdownItemClick(event) {
        event.preventDefault();
        const languageCode = this.dataset.languageCode;
        localStorage.setItem('languageCode', languageCode);

        const currentUrl = window.location.href;
        if (currentUrl.indexOf('?lang=') === -1) {
            window.location.href = currentUrl + '?lang=' + languageCode;
        } else {
            window.location.href = currentUrl.replace(/\?lang=\w{2,}/, '?lang=' + languageCode);
        }
    }
				</script>

<script th:inline="javascript">
function compareVersions(version1, version2) {
	  const v1 = version1.split('.');
	  const v2 = version2.split('.');
	  
	  for (let i = 0; i < v1.length || i < v2.length; i++) {
	    const n1 = parseInt(v1[i]) || 0;
	    const n2 = parseInt(v2[i]) || 0;
	    
	    if (n1 > n2) {
	      return 1;
	    } else if (n1 < n2) {
	      return -1;
	    }
	  }
	  
	  return 0;
	}
	
  async function getLatestReleaseVersion() {
    const url = "https://api.github.com/repos/Frooodle/Stirling-PDF/releases/latest";
    const response = await fetch(url);
    const data = await response.json();
    return data.tag_name.substring(1);
  }

  const currentVersion =  /*[[${@appVersion}]]*/ ''; // Replace with your current version number

  async function checkForUpdate() {
    const latestVersion = await getLatestReleaseVersion();
    console.log("latestVersion=" + latestVersion)
    console.log("currentVersion=" + currentVersion)
    console.log("compareVersions(latestVersion, currentVersion) > 0)=" + compareVersions(latestVersion, currentVersion))
    if (latestVersion != null && latestVersion != "" && compareVersions(latestVersion, currentVersion) > 0) {
      document.getElementById("update-btn").style.display = "block";
      console.log("visible")
    } else {
      document.getElementById("update-btn").style.display = "none";
      console.log("hidden")
    }
  }

  checkForUpdate();
</script>

<style>

    .main-icon {
        width: 36px;
        height: 36px;
        vertical-align: middle;
        transform: translateY(-2px);
    }
    .icon {
        width: 16px;
        height: 16px;
        vertical-align: middle;
        transform: translateY(-2px);
    }

    .icon + .icon {
        margin-left: -4px;
    }

    .icon-text {
        margin-left: 4px;
    }

.nav-item-separator {
    position: relative;
    margin: 0 4px; /* Adjust the margin as needed */
}

.nav-item-separator::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%; /* Adjust the top and bottom margins as needed */
    bottom: 10%;
    width: 1px;
    background-color: #ccc; /* Adjust the color as needed */
}
.navbar-icon {
  width: 20px;
  height: 20px;
   transform: translateY(-2px);
}


</style>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container ">

            <a class="navbar-brand" href="#" th:href="@{/}" >
                <img th:if="${@navBarText} == 'Stirling PDF'" class="main-icon" src="favicon.svg" alt="icon">
                <span class="icon-text"  th:text="${@navBarText}"></span>
            </a>

         
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">

                <ul class="navbar-nav mr-auto flex-nowrap">
                    
                    <li class="nav-item">
                        <a class="nav-link" href="#" th:href="@{multi-tool}" th:classappend="${currentPage}=='multi-tool' ? 'active' : ''" th:title="#{home.multiTool.desc}">
                            <img class="icon" src="images/tools.svg" alt="icon">
                            <span class="icon-text"  th:text="#{home.multiTool.title}"></span>
                        </a>
                    </li>
<li class="nav-item nav-item-separator"></li>
                    <li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='merge-pdfs' OR ${currentPage}=='split-pdfs' OR ${currentPage}=='pdf-organizer' OR ${currentPage}=='rotate-pdf' ? 'active' : ''">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img class="icon" src="images/file-earmark-pdf.svg" alt="icon">
        <span class="icon-text"  th:text="#{navbar.pageOps}"></span>
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <!-- Existing menu items -->
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('merge-pdfs', 'images/union.svg', 'home.merge.title', 'home.merge.desc')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('split-pdfs', 'images/layout-split.svg', 'home.split.title', 'home.split.desc')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'pdf-organizer', 'images/sort-numeric-down.svg', 'home.pdfOrganiser.title', 'home.pdfOrganiser.desc')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'rotate-pdf', 'images/arrow-clockwise.svg', 'home.rotate.title', 'home.rotate.desc')}"></div>
        <div th:replace="~{fragments/navbarEntry :: navbarEntry ( 'remove-pages', 'images/file-earmark-x.svg', 'home.removePages.title', 'home.removePages.desc')}"></div>

    </div>
</li>
<li class="nav-item nav-item-separator"></li>
                    <li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='pdf-to-pdfa' OR ${currentPage}=='file-to-pdf' OR ${currentPage}=='xlsx-to-pdf' OR ${currentPage}=='pdf-to-word' OR ${currentPage}=='pdf-to-presentation' OR ${currentPage}=='pdf-to-text' OR ${currentPage}=='pdf-to-html' OR ${currentPage}=='pdf-to-xml' ? 'active' : ''"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        <img class="icon" src="images/arrow-left-right.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;"> 
                        <span class="icon-text"  th:text="#{navbar.convert}"></span>
                    </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <!-- Existing menu items -->
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'images/image.svg', 'home.imageToPdf.title', 'home.imageToPdf.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('file-to-pdf', 'images/file.svg', 'home.fileToPDF.title', 'home.fileToPDF.desc')}"></div>
                            <hr class="dropdown-divider">
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'images/image.svg', 'home.pdfToImage.title', 'home.pdfToImage.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-word', 'images/file-earmark-word.svg', 'home.PDFToWord.title', 'home.PDFToWord.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-presentation', 'images/file-earmark-ppt.svg', 'home.PDFToPresentation.title', 'home.PDFToPresentation.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-text', 'images/filetype-txt.svg', 'home.PDFToText.title', 'home.PDFToText.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-html', 'images/filetype-html.svg', 'home.PDFToHTML.title', 'home.PDFToHTML.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-xml', 'images/filetype-xml.svg', 'home.PDFToXML.title', 'home.PDFToXML.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-pdfa', 'images/file-earmark-pdf.svg', 'home.pdfToPDFA.title', 'home.pdfToPDFA.desc')}"></div>
                            
                            

                           
                        </div>
                    </li>

<li class="nav-item nav-item-separator"></li>
                   
                  <li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='add-watermark' OR ${currentPage}=='cert-sign' ? 'active' : ''">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="icon" src="images/shield-check.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;"> <span class="icon-text"  th:text="#{navbar.security}"></span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-password', 'images/lock.svg', 'home.addPassword.title', 'home.addPassword.desc')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-password', 'images/unlock.svg', 'home.removePassword.title', 'home.removePassword.desc')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-permissions', 'images/shield-lock.svg', 'home.permissions.title', 'home.permissions.desc')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-watermark', 'images/droplet.svg', 'home.watermark.title', 'home.watermark.desc')}"></div>
                        <div th:replace="~{fragments/navbarEntry :: navbarEntry ('cert-sign', 'images/award.svg', 'home.certSign.title', 'home.certSign.desc')}"></div>
                    </div>
                </li>

                  <li class="nav-item nav-item-separator"></li> 
                    <li class="nav-item dropdown" th:classappend="${currentPage}=='sign' OR ${currentPage}=='repair' OR ${currentPage}=='compare' OR ${currentPage}=='flatten' OR ${currentPage}=='remove-blanks' OR ${currentPage}=='extract-image-scans' OR ${currentPage}=='change-metadata' OR ${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='change-permissions' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' ? 'active' : ''">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="icon" src="images/card-list.svg" alt="icon" style="width: 16px; height: 16px; vertical-align: middle;"> 
                        <span class="icon-text"  th:text="#{navbar.other}"></span>
                        
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('ocr-pdf', 'images/search.svg', 'home.ocr.title', 'home.ocr.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('add-image', 'images/file-earmark-richtext.svg', 'home.addImage.title', 'home.addImage.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('compress-pdf', 'images/file-zip.svg', 'home.compressPdfs.title', 'home.compressPdfs.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-images', 'images/images.svg', 'home.extractImages.title', 'home.extractImages.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('change-metadata', 'images/clipboard-data.svg', 'home.changeMetadata.title', 'home.changeMetadata.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('extract-image-scans', 'images/scanner.svg', 'home.ScannerImageSplit.title', 'home.ScannerImageSplit.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('sign', 'images/sign.svg', 'home.sign.title', 'home.sign.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('flatten', 'images/flatten.svg', 'home.flatten.title', 'home.flatten.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('repair', 'images/wrench.svg', 'home.repair.title', 'home.repair.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('remove-blanks', 'images/blank-file.svg', 'home.removeBlanks.title', 'home.removeBlanks.desc')}"></div>
                            <div th:replace="~{fragments/navbarEntry :: navbarEntry ('compare', 'images/scales.svg', 'home.compare.title', 'home.compare.desc')}"></div>
                        </div>
                    </li>


                </ul>
                <ul class="navbar-nav ml-auto flex-nowrap">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img class="navbar-icon" src="images/star.svg" alt="icon" width="24" height="24">
                        </a>
                        <div class="dropdown-menu" id="favoritesDropdown" aria-labelledby="navbarDropdown">
                            <!-- Dropdown items will be added here by JavaScript -->
                        </div>
                    </li>
                    
                    <li class="nav-item">
                        <a class="nav-link" id="dark-mode-toggle" href="#">
                          <img class="navbar-icon" id="dark-mode-icon" src="moon.svg" alt="icon" />
                        </a>
                      </li>
                   
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-globe2" viewBox="0 0 20 20">
                          <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
                        </svg>
                         </a>
                        <div class="dropdown-menu" aria-labelledby="languageDropdown">
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ar_AR">
                                <img src="images/flags/sa.svg" alt="icon" width="20" height="15"> العربية
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ca_CA">
                                <img src="images/flags/es-ct.svg" alt="icon" width="20" height="15"> Català
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="zh_CN">
                                <img src="images/flags/cn.svg" alt="icon" width="20" height="15"> 简体中文
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="de_DE">
                                <img src="images/flags/de.svg" alt="icon" width="20" height="15"> Deutsch
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_GB">
                                <img src="images/flags/gb.svg" alt="icon" width="20" height="15"> English
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="es_ES">
                                <img src="images/flags/es.svg" alt="icon" width="20" height="15"> Español
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="fr_FR">
                                <img src="images/flags/fr.svg" alt="icon" width="20" height="15"> Français
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="it_IT">
                                <img src="images/flags/it.svg" alt="icon" width="20" height="15"> Italiano
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="pl_PL">
                                <img src="images/flags/pl.svg" alt="icon" width="20" height="15"> Polski
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ro_RO">
                                <img src="images/flags/ro.svg" alt="icon" width="20" height="15"> Romanian
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="sv_SE">
                                <img src="images/flags/se.svg" alt="icon" width="20" height="15"> Svenska
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ru_RU">
                                <img src="images/flags/ru.svg" alt="icon" width="20" height="15"> Русский
                            </a>
                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ko_KR">
                                <img src="images/flags/kr.svg" alt="icon" width="20" height="15"> 한국어
                            </a>
                        </div>
                    </li>

                    
                    <li class="nav-item">
                        <!-- Settings Button -->
                        <a href="#" class="nav-link" data-toggle="modal" data-target="#settingsModal">
                            <img class="navbar-icon" src="images/gear.svg" alt="icon" width="24" height="24">
                        </a>

                    </li>
                </ul>

         
            </div>

        </div>
        <script th:inline="javascript">
        
        
        function updateFavoritesDropdown() {
            var dropdown = document.querySelector('#favoritesDropdown');
            dropdown.innerHTML = '';  // Clear the current favorites

            

            var hasFavorites = false;

            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                if (localStorage.getItem(key) === 'favorite') {
                    // Find the corresponding navbar entry
                    var navbarEntry = document.querySelector(`a[href='${key}']`);
                    if (navbarEntry) {
                        // Create a new dropdown entry
                        var dropdownItem = document.createElement('a');
                        dropdownItem.className = 'dropdown-item';
                        dropdownItem.href = navbarEntry.href;
                        dropdownItem.innerHTML = navbarEntry.innerHTML;
                        dropdown.appendChild(dropdownItem);
                        hasFavorites = true;
                    }
                }
            }

            // Show or hide the default item based on whether there are any favorites
            if(!hasFavorites){
            	var defaultItem = document.createElement('a');
                defaultItem.className = 'dropdown-item';
                defaultItem.textContent = [[#{noFavourites}]]
                dropdown.appendChild(defaultItem);
            }
        }
    document.addEventListener('DOMContentLoaded', function () {
            
        updateFavoritesDropdown();
        });
        </script>
        
    </nav>
    <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>

    <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content dark-card">
            <div class="modal-header">
                <h5 class="modal-title" id="settingsModalLabel" th:text="#{settings.title}"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <p class="mb-0" th:utext="#{settings.appVersion} + ' ' + ${@appVersion}"></p>
                    <a href="swagger-ui/index.html" target="_blank">
                        <button type="button" class="btn btn-sm btn-outline-primary"> API </button>
                    </a>
                    <a href="https://github.com/Frooodle/Stirling-PDF/releases" target="_blank">
					    <button type="button" class="btn btn-sm btn-outline-primary" id="update-btn" th:utext="#{settings.update}"></button>
					</a>
                    

                </div>
                <div class="form-group">
                    <label for="downloadOption" th:utext="#{settings.downloadOption.title}"></label>
                    <select class="form-control" id="downloadOption">
                        <option value="sameWindow" th:utext="#{settings.downloadOption.1}"></option>
                        <option value="newWindow" th:utext="#{settings.downloadOption.2}"></option>
                        <option value="downloadFile" th:utext="#{settings.downloadOption.3}"></option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="zipThreshold" th:utext="#{settings.zipThreshold}"></label>
                    <input type="range" class="custom-range" min="1" max="9" step="1" id="zipThreshold" value="4">
                    <span id="zipThresholdValue" class="ml-2"></span>
                </div>
                <div class="form-group">
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="boredWaiting">
                    <label class="custom-control-label" for="boredWaiting" th:text="#{bored}"></label>
                  </div>
                </div>
 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{close}"></button>
            </div>
        </div>
    </div>
</div>


    <script>
    $(document).ready(function() {
        $(".nav-item.dropdown").each(function() {
            var $dropdownMenu = $(this).find(".dropdown-menu");
            if ($dropdownMenu.children().length <= 2 && $dropdownMenu.children("hr.dropdown-divider").length === $dropdownMenu.children().length) {
                $(this).prev('.nav-item.nav-item-separator').remove();
                $(this).remove();
            }
        });
        
        //Sort languages by alphabet
        var list = $('.dropdown-menu[aria-labelledby="languageDropdown"]').children("a");
        list.sort(function(a, b) {
            var A = $(a).text().toUpperCase();
            var B = $(b).text().toUpperCase();
            return (A < B) ? -1 : (A > B) ? 1 : 0;
        })
        .appendTo('.dropdown-menu[aria-labelledby="languageDropdown"]');
    });




					// Get the download option from local storage, or set it to 'sameWindow' if it doesn't exist
					var downloadOption = localStorage.getItem('downloadOption')
							|| 'sameWindow';

					// Set the selected option in the dropdown
					document.getElementById('downloadOption').value = downloadOption;

					
					// Save the selected option to local storage when the dropdown value changes
					document.getElementById('downloadOption').addEventListener(
							'change',
							function() {
								downloadOption = this.value;
								localStorage.setItem('downloadOption',
										downloadOption);
							});
					
					
					// Get the zipThreshold value from local storage, or set it to 0 if it doesn't exist
					var zipThreshold = parseInt(localStorage.getItem('zipThreshold'), 10) || 4;

					// Set the value of the slider and the display span
					document.getElementById('zipThreshold').value = zipThreshold;
					document.getElementById('zipThresholdValue').textContent = zipThreshold;

					
					
					// Save the selected value to local storage when the slider value changes
					document.getElementById('zipThreshold').addEventListener('input', function () {
					    zipThreshold = this.value;
					    document.getElementById('zipThresholdValue').textContent = zipThreshold;
					    localStorage.setItem('zipThreshold', zipThreshold);
					});

					
					var boredWaiting = localStorage.getItem('boredWaiting') || 'disabled';
					document.getElementById('boredWaiting').checked = boredWaiting === 'enabled';
					
					document.getElementById('boredWaiting').addEventListener('change', function() {
					  boredWaiting = this.checked ? 'enabled' : 'disabled';
					  localStorage.setItem('boredWaiting', boredWaiting);
					});

				</script>



</div>
