{% assign recommended_counter = 0 %}

<div class="recommended-wrapper" id="recommended-section">
    <div class="heading lang-en">
        Recommended for you
    </div>
     <div class="heading lang-de">
        Für Sie empfohlen
    </div>

    <div class="recommended-wrapper-content">
       {% comment %} {% for course in courses.enrolled %}
            {% unless course.properties.resource or course.properties.on_demand %}
                <div class="carousel-card recommended-card">
                    {% include "cards_course" with course %}
                </div>
                {% assign recommended_counter = recommended_counter |  plus: 1 %}
            {% endunless %}
        {% endfor %} {% endcomment %}
        {% for learning_path in learning_paths.enrolled %}
            {% for category in learning_path.categories %}
                {% if category.name == userLanguage %}
                    <div class="carousel-card recommended-card">
                        {% include "cards_learning_path" %}
                    </div>
                    {% assign recommended_counter = recommended_counter |  plus: 1 %}
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>

    <div class="see-all-btn-container">
        <a class="light-btn" id="expand-btn" href="/app/catalog">See all</a>
    </div>
</div>

<style>
    .recommended-wrapper-content {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 20px;
        margin-top: 30px;
    }
    @media only screen and (max-width: 1170px) { 
        .recommended-wrapper-content {
            grid-template-columns: repeat(2,1fr);
        }
    }
    @media only screen and (max-width: 768px) { 
        .recommended-wrapper-content {
            grid-template-columns: repeat(1,1fr);
        }
    }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const cards = document.querySelectorAll('.recommended-card');
    const seeAllBtn = document.getElementById('expand-btn');

    const maxCards = 8;
    const initialVisibleCards = 4;
    const totalCards = cards.length;
    let isExpanded = false; 

    if (totalCards > initialVisibleCards) {
        seeAllBtn.style.display = 'block';
    } else {
        seeAllBtn.style.display = 'none';
    }

    function updateCardVisibility() {
        cards.forEach((card, index) => {
            if (isExpanded) {
                card.style.display = index < maxCards ? 'block' : 'none';
            } else {
                card.style.display = index < initialVisibleCards ? 'block' : 'none';
            }
        });

        seeAllBtn.textContent = isExpanded ? 'Show Less' : 'See All';
    }

    updateCardVisibility();

    seeAllBtn.addEventListener('click', function (e) {
        e.preventDefault();
        isExpanded = !isExpanded;
        updateCardVisibility();
    });
});
</script>