{% assign available_categories = "Ethics and Compliance,Item Creation,Getting Paid,Merchandising,Onboarding,Packaging and Labeling,Replenishment,Retail Basics,Transportation" %}
<div id="categories" class="catalog-categories-container">
    <div class="text-container">
        <div class="text-heading text-center">
            Explore the eLearning modules below!
        </div>
    </div>

    <div class="category-links-wrapper">
        {% assign uniq_cats = '' %}
        {% for course in courses.in_catalog %}
            {% for category in course.categories %}
                {% if available_categories contains category.name %}
					{% comment %} <script> console.log("{{ course.name }} + {{ category.name }}")</script> {% endcomment %}
                    {% unless uniq_cats contains category.name %}
                        <a class="category-card" id="{{category.name}}" href="/app/catalog?search={{category.name}}">
                            <img class="category-card-image" src="" alt="">
                        </a>
                        {% assign uniq_cats = uniq_cats | append: category.name%}
                    {% endunless %}
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>
</div>

<style>
.category-links-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.category-card {
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /*background: #13244c;*/
  background: transparent;
  padding: 20px;
}
.category-card:hover {
  transform: scale(1.075);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}
.category-card-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.category-card-image {
  width: 100%;
}
</style>

<script>
    const categoryCards = document.querySelectorAll('.category-card');
    const images = [
        {name: 'Ethics and Compliance', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/ethics_and_compliance.png"},
        {name: 'Onboarding', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/onboarding.png"},
        {name: 'Retail Basics', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/retail_basics.png"},
        {name: 'Item Creation', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/item_creation.png"},
        {name: 'Merchandising', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/merchandising.png"},
        {name: 'Transportation', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/transportation.png"},
        {name: 'Packaging and Labeling', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/packaging_labeling.png"},
        {name: 'Getting Paid', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/getting_paid.png"},
        {name: 'Replenishment', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/replenish.png"},
    ];

    function addCategoryCardImage() {
        categoryCards.forEach((card) => {
            const cardName = card.id;
            const cardImage = card.querySelector('.category-card-image');

            for (const i of images) {
                if (cardName === i.name) {
                    cardImage.src = i.url;
                }
            }
        });
    }

    function sortCategoryCards() {
        const wrapper = document.querySelector('.category-links-wrapper');
        const sortedCards = Array.from(categoryCards).sort((a, b) => {
            const aIndex = images.findIndex(img => img.name === a.id);
            const bIndex = images.findIndex(img => img.name === b.id);
            return aIndex - bIndex;
        });

        wrapper.innerHTML = '';

        sortedCards.forEach(card => {
            wrapper.appendChild(card);
        });
    }

    addEventListener("DOMContentLoaded", (event) => {
        addCategoryCardImage();
        sortCategoryCards();
    });
</script>
