{% assign available_categories = "Operativo Cros funcional,Etica y Cumplimiento,Resposabilidad Social y Ambienta,Ecosistema Walmart" %}
<div class="catalog-categories-container">
    {% comment %} <div class="text-container">
        <div class="text-heading text-center">
            Explore the module catalog below!
        </div>
    </div> {% endcomment %}

    <div class="category-links-wrapper" id="categories">
        <a class="category-card" id="Operativo Cros funcional" href="/app/operativo-cros-funcional">
            <img class="category-card-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/ethics.png" alt="">
        </a>
        <a class="category-card" id="Etica y Cumplimiento" href="/app/etica-y-cumplimiento">
            <img class="category-card-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/onboarding.png" alt="">
        </a>
        <a class="category-card" id="Resposabilidad Social y Ambienta" href="/app/resposabilidad-social-y-ambienta">
            <img class="category-card-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/merchandisin.png" alt="">
        </a>
        <a class="category-card" id="Ecosistema Walmart" href="/app/ecosistema-walmart">
            <img class="category-card-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/gettingPaid.png" alt="">
        </a>
    </div>
</div>

<style>
.category-links-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.catalog-categories-container {
    margin-top: 30px;
}
.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;
  padding: 10px;
}
.category-card:hover {
  transform: scale(1.075);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}
.category-card-image {
  width: 100%;
  height: 100%;
  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/New+Category+Images/ethics.png"},
    //     {name: 'Onboarding', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/onboarding.png"},
    //     {name: 'Retail Basics', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/retail.png"},
    //     {name: 'Item Creation', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/item_creation.png"},
    //     {name: 'Merchandising', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/merchandisin.png"},
    //     {name: 'Transportation', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/transport.png"},
    //     {name: 'Packaging and Labeling', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/packing.png"},
    //     {name: 'Getting Paid', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/gettingPaid.png"},
    //     {name: 'Replenishment', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/Replenishment.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>
