{% styles default %}
{% styles colors %}
{% styles custom %}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">

<!-- Slick -->
<script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
        </script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>


<script>


    function limitCardDescriptionCharacters() {
        var elements = document.querySelectorAll('.card-description');

        elements.forEach(function (element) {
            var text = element.innerText;
            var truncatedText = text.length > 250 ? text.slice(0, 250) + '...' : text;
            element.innerText = truncatedText;
        });
    }

    function limitCardCategories() {
            var cards = document.querySelectorAll('.card');

            cards.forEach(function(card, index) {
                var cardCategories = card.querySelectorAll('.card-category');
                var dollarSignCount = 0;
                var missingCategories = [];

                cardCategories.forEach(function(category, categoryIndex) {
                    if (category.textContent.trim().startsWith('$')) {
                        if (dollarSignCount < 5) {
                            category.style.display = 'block';
                            dollarSignCount++;
                        } else {
                            category.style.display = 'none';
                        }
                    } else {
                        missingCategories.push(category);
                    }
                });

                missingCategories.forEach(function(missingCategory, missingIndex) {
                    if (dollarSignCount < 5) {
                        missingCategory.style.display = 'block';
                        dollarSignCount++;
                    } else {
                        missingCategory.style.display = 'none';
                    }
                });
            });
    }
    function removeDollarSign() {
            var cardCategories = document.querySelectorAll('.card-category');
            var courseCategoriesCoverPage = document.querySelectorAll('.np-content-categories-content-item')
            var categoryFilters = document.getElementsByClassName('category-filter');

            cardCategories.forEach(function(category, index) {
                category.textContent = category.textContent.replace('$', '');
            });

            courseCategoriesCoverPage.forEach(function(category, index) {
                category.textContent = category.textContent.replace('$', '');
            });

            for (var i = 0; i < categoryFilters.length; i++) {
            var textWithoutDollarSign = categoryFilters[i].nextSibling.nodeValue.replace(/\$/g, '');
            categoryFilters[i].nextSibling.nodeValue = textWithoutDollarSign;
            }

            if (window.location.pathname == '/app') {
                var categoryFiltersArray = Array.from(document.getElementsByClassName('category-filter'));
                categoryFiltersArray.forEach(function(category, index) {
                    category.textContent = category.textContent.replace('$', '');
                });
            }
        }

    function resultCounter() {
        if (window.location.pathname.includes('search')) {
            var searchCardsLenght = document.querySelectorAll('.np-search-result').length;
            var searchNumber = document.getElementById('search-number').innerText = searchCardsLenght;
        }
    }

    function removeCertifacteeVerificationCard() {
        if (window.location.pathname.includes('certificate')) {
            var certificateCard = document.getElementsByClassName('np-certificate-verification-card')
            certificateCard[0].style.display = "none";
        }
    }


    document.addEventListener('DOMContentLoaded', function () {
        limitCardDescriptionCharacters();
        limitCardCategories();
        removeDollarSign();
        resultCounter();
        removeCertifacteeVerificationCard();
    });
</script>
