<div class="recommended-wrapper">
    <div class="heading lang-en">
        Browse all courses
    </div>
    <div class="heading lang-de">
        Alle Kurse durchsuchen
    </div>
    <div class="heading lang-fr">
        Parcourir toutes les formations
    </div>
    <div class="heading lang-jp">
        すべてのコース
    </div>
    <div class="carousel-filters-wrapper">
        {% include 'catalog-filters' %}
    </div>
    <div class="catalog-courses-wrapper">
        {% for course in courses.enrolled %}
            {% unless course.properties.resource or course.properties.on_demand%}
                {% if course.properties.language == userLanguage %}
                <div class="catalog-course-container">{% include "cards_course" %}</div>
                {% endif %}
            {% endunless %}
        {% endfor %}
    </div>

</div>

<style>
    .catalog-courses-wrapper {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 20px;
        margin-top: 30px;
    }
    .all-courses-carousel {
        position: relative;
    }
    .slick-arrow {
        position: absolute;
        top: -30px;
        z-index: 111;
        cursor: pointer;
    }
    .right-arrow {
        margin-left: 30px;
    }
    .slick-dots button {
        display: block;
        width: 10px;
        height: 10px;
        padding: 0;
        border: none;
        border-radius: 1px;
        background: #8878FF;
        text-indent: -9999px;
    }
    .slick-dots {
        list-style-type: none;
    }
    .slick-dots {
        display: flex;
        justify-content: center;
        margin: 0;
        padding-top: 3rem;
        list-style-type: none;
        gap: 10px;
    }
    .slick-dots li {
        margin: 0 0.25rem;
    }
    .slick-dots li.slick-active button {
        background: #6CF1C9;

    }
    @media only screen and (max-width: 1170px) { 
        .catalog-courses-wrapper {
            grid-template-columns: repeat(2,1fr);
        }
    }
    @media only screen and (max-width: 768px) { 
        .catalog-courses-wrapper {
            grid-template-columns: repeat(1,1fr);
        }
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
    const filters = document.querySelectorAll('.filter');
    const cards = document.querySelectorAll('.catalog-course-container .card');

    let activeFilter = null; 

    filters.forEach(filter => {
        filter.addEventListener('click', function() {
            const value = filter.getAttribute('value');

            if (activeFilter === value) {
                activeFilter = null;
                filter.classList.remove('filter-active');
            } else {
                activeFilter = value;
                
                filters.forEach(f => f.classList.remove('filter-active'));
                filter.classList.add('filter-active');
            }

            filterCourses();
        });
    });

    function filterCourses() {
        if (!activeFilter) {
            cards.forEach(card => {
                card.parentElement.style.display = 'block';
            });
        } else {
            cards.forEach(card => {
                const cardCategories = card.getAttribute('categories').split(',');
                if (cardCategories.includes(activeFilter)) {
                    card.parentElement.style.display = 'block';
                } else {
                    card.parentElement.style.display = 'none';
                }
            });
        }
    }
});
</script>