{% if courses.enrolled.any? %}

{% comment %}
  ============================================================================
  CATEGORY CARDS - Refactored for DRY & Maintainability
  ============================================================================
  To add a new category:
  1. Add it to 'ordered_categories' in the desired position
  2. Add its icon URL to the icon lookup section below
  That's it! No more copy-pasting 20 lines of code.
  ============================================================================
{% endcomment %}

{% comment %} Define the display order for categories {% endcomment %}
{% assign ordered_categories = "Getting Started,Using the App,Earnings,Safety,Offer Acceptance,Arrival & Pick Up,Delivery,Shopping & Delivery,Returns,Rewards,Troubleshooting" | split: "," %}

{% comment %} ==================== ORDERED CATEGORIES ==================== {% endcomment %}
{% for category_name in ordered_categories %}
  {% for school_category in school_categories %}
    {% if school_category == category_name %}
      
      {% comment %} Icon lookup - add new category icons here {% endcomment %}
      {% case school_category %}
        {% when "Getting Started" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/categories-img-label.webp" %}
          {% assign category_alt = "Getting Started Category Icon" %}
        {% when "Using the App" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-using-the-app-icon.webp" %}
          {% assign category_alt = "Using the App Category Icon" %}
        {% when "Earnings" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-earnings-icon.webp" %}
          {% assign category_alt = "Earnings Category Icon" %}
        {% when "Safety" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-safety-icon.webp" %}
          {% assign category_alt = "Safety Icon" %}
        {% when "Offer Acceptance" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-offer-acceptance-icon.webp" %}
          {% assign category_alt = "Offer Acceptance Icon" %}
        {% when "Arrival & Pick Up" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-arrival-pickup-icon.webp" %}
          {% assign category_alt = "Arrival & Pick Up Icon" %}
        {% when "Delivery" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-delivery-icon.webp" %}
          {% assign category_alt = "Delivery Category Icon" %}
        {% when "Shopping & Delivery" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-shopping-delivery-icon.webp" %}
          {% assign category_alt = "Shopping & Delivery Category Icon" %}
        {% when "Returns" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-returns-icon.webp" %}
          {% assign category_alt = "Returns Icon" %}
        {% when "Rewards" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-rewards-icon.webp" %}
          {% assign category_alt = "Rewards Icon" %}
        {% when "Troubleshooting" %}
          {% assign category_icon = "https://cdn.northpass.io/walmart/category-troubleshooting-icon.webp" %}
          {% assign category_alt = "Troubleshooting Icon" %}
      {% endcase %}

      <div class="np-category-card" data-category="{{ school_category | replace: ' ', '-' | downcase }}">
        <div class="np-category-card-content-wrapper">
          <div class="np-category-card-img">
            <img src="{{ category_icon }}" width="60" height="60" alt="{{ category_alt }}">
          </div>
          <div class="title-wrapper">
            <div class="labels-wrapper"></div>
            <div class="np-category-title">{{ school_category }}</div>
          </div>
        </div>
        <i class="fas fa-chevron-right"></i>
      </div>
      {% include "filtered_courses_tray", category_name: school_category %}

    {% endif %}
  {% endfor %}
{% endfor %}

{% comment %} ==================== REMAINING CATEGORIES ==================== {% endcomment %}
{% comment %} Catches any categories not in the ordered list above {% endcomment %}
{% for school_category in school_categories %}
  {% unless ordered_categories contains school_category %}
    
    {% comment %} Icon lookup for non-ordered categories {% endcomment %}
    {% case school_category %}
      {% when "Drop Off & Returns" %}
        {% assign category_icon = "https://cdn.northpass.io/walmart/category-dropoff-returns-icon.webp" %}
      {% when "Special Topics" %}
        {% assign category_icon = "https://cdn.northpass.io/walmart/category-troubleshooting-icon.webp" %}
      {% when "Trust & Safety" %}
        {% assign category_icon = "https://cdn.northpass.io/walmart/category-trust-safety-icon.webp" %}
      {% else %}
        {% assign category_icon = "https://cdn.northpass.io/walmart/category-spark-icon.webp" %}
    {% endcase %}

    <div class="np-category-card" data-category="{{ school_category | replace: ' ', '-' | downcase }}">
      <div class="np-category-card-content-wrapper">
        <div class="np-category-card-img">
          <img src="{{ category_icon }}" width="60" height="60" alt="{{ school_category }} Category Icon">
        </div>
        <div class="title-wrapper">
          <div class="labels-wrapper"></div>
          <div class="np-category-title">{{ school_category }}</div>
        </div>
      </div>
      <i class="fas fa-chevron-right"></i>
    </div>
    {% include "filtered_courses_tray", category_name: school_category %}

  {% endunless %}
{% endfor %}

{% endif %}
