{% assign remainder = include.index | modulo: 4 %}
<section class="popular-elearning-section">
    <h2 class="text-center poppins margin-bottom--large">Popular eLearning</h2>
    <div id="popular-elearning" class="container">
        <div class="center-row">
            <div class="col-lg-12 center-block">
                {% for album in page.popular-elearning.courses %}
                    {% assign album-info = site.data.albums[album.id] %}
                    {% include album-description.html album=album-info index=forloop.index%}
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="margin-bottom--small text-center ">
        <a id="viewAllCourses" onclick="toggleViewAllCourses()"
           href="#elearning-catalog" role="button"
           class="btn btn-info btn-rounded view-all-button" data-toggle="collapse"
           aria-expanded="false" aria-controls="workshop-catalog">
            View All Elearning
        </a>
    </div>
    <div class="collapse" id="elearning-catalog">
        {% include elearning-catalog.html %}
    </div>
</section>


<script>
    function toggleViewAllCourses() {
        const button = document.getElementById("viewAllCourses");
        const text = button.innerText;
        if (text === "View All Elearning") {
            button.innerText = "Collapse All Elearning";
            button.textContent = "Collapse All Elearning";
        } else if (text === "Collapse All Elearning") {
            button.innerText = "View All Elearning";
            button.textContent = "View All Elearning";
        }
    }
</script>