{% assign available_categories = 'Introduction to Walmart,Onboarding,Merchandising,Supply Chain,Getting Paid' %}
{% assign uniq_courses = '' %}
{% assign sorted_learning_paths = learning_paths.available | sort: "name" %}

<div class="welcome-courses-wrapper">
    <div class="category-courses-wrapper">
        <div class="category-name-wrapper" id="Introduction to Walmart" onclick="expandSection('Introduction to Walmart')">
            <span>
                <i class="fas fa-chevron-up"></i>
            </span>
            <span>
                1. Introduction to Walmart
            </span>
        </div> 
    <div class="category-courses-container inactive">
        {% for learning_path in sorted_learning_paths %}
            {% for category in learning_path.categories %}
                {% if category.name == 'Introduction to Walmart'%}
                    {% unless uniq_courses contains learning_path.name %}
                        {% include 'cards_learning_paths_square' %}
                        {% assign uniq_courses = uniq_courses |  append: learning_path.name %}
                    {% endunless %}
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>
    </div>
    <div class="category-courses-wrapper">
    <div class="category-name-wrapper" id="Onboarding" onclick="expandSection('Onboarding')">
        <span>
            <i class="fas fa-chevron-up"></i>
        </span>
        <span>
            2. Onboarding
        </span>
    </div>  
    <div class="category-courses-container inactive">
        {% assign uniq_courses = "" %}
        {% for learning_path in sorted_learning_paths %}
            {% for category in learning_path.categories %}
                {% if category.name == 'Onboarding' %}
                    {% unless uniq_courses contains learning_path.name %}
                        {% include 'cards_learning_paths_square' %}
                        {% assign uniq_courses = uniq_courses | append: learning_path.name | append: "," %}
                    {% endunless %}
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>
    </div>
    <div class="category-courses-wrapper">
        <div class="category-name-wrapper" id="Merchandising" onclick="expandSection('Merchandising')">
            <span>
                <i class="fas fa-chevron-up"></i>
            </span>
            <span>
                3. Merchandising
            </span>
        </div>  
        <div class="category-courses-container inactive">
            {% for learning_path in sorted_learning_paths  %}
                {% for category in learning_path.categories %}
                    {% if category.name == 'Merchandising'%}
                        {% unless uniq_courses contains learning_path.name %}
                            {% include 'cards_learning_paths_square' %}
                            {% assign uniq_courses = uniq_courses |  append: learning_path.name %}
                        {% endunless %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </div>
    </div>
    <div class="category-courses-wrapper">
        <div class="category-name-wrapper" id="Supply Chain" onclick="expandSection('Supply Chain')">
            <span>
                <i class="fas fa-chevron-up"></i>
            </span>
            <span>
                4. Supply Chain
            </span>
        </div>  
        <div class="category-courses-container inactive">
            {% for learning_path in sorted_learning_paths  %}
                {% for category in learning_path.categories %}
                    {% if category.name == 'Supply Chain'%}
                        {% unless uniq_courses contains learning_path.name %}
                            {% include 'cards_learning_paths_square' %}
                            {% assign uniq_courses = uniq_courses |  append: learning_path.name %}
                        {% endunless %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </div>
    </div>
    <div class="category-courses-wrapper">
        <div class="category-name-wrapper" id="Getting Paid" onclick="expandSection('Getting Paid')">
            <span>
                <i class="fas fa-chevron-up"></i>
            </span>
            <span>
                5. Getting Paid
            </span>
        </div>  
        <div class="category-courses-container inactive">
            {% for learning_path in sorted_learning_paths %}
                {% for category in learning_path.categories %}
                    {% if category.name == 'Getting Paid'%}
                        {% unless uniq_courses contains learning_path.name %}
                            {% include 'cards_learning_paths_square' %}
                            {% assign uniq_courses = uniq_courses |  append: learning_path.name %}
                        {% endunless %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </div>
    </div>
</div>

<style>
    
.category-courses-wrapper {
  margin: 30px 0;
}
.category-courses-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-height: 0; 
  overflow: hidden;
  transition: max-height 0.5s ease-in-out; 
}
.inactive{
    max-height: 0;
}
.active {
    max-height: 1000px;
}
.category-name-wrapper {
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  gap: 20px;
  cursor: pointer;
}
@media only screen and (max-width: 1000px) {
  .category-courses-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .category-courses-container {
    grid-template-columns: repeat(1, 1fr);
  }
}
</style>

<script>
function expandSection(id) {
    const container = document.getElementById(id).parentElement.children[1];
    const arrow = document.getElementById(id).children[0].children[0];

    if (container.style.maxHeight) {
        container.style.maxHeight = null;
    } else {
        container.style.maxHeight = container.scrollHeight + "px";
    }

    arrow.classList.toggle('fa-chevron-up');
    arrow.classList.toggle('fa-chevron-down');
}
</script>