Update Cin7's templates for employee and external academy. Backed up HackerRnank's new designs.

Custom_Templates/customer_templates/Cin7 Employees/learning_paths.html.liquid

@@ -0,0 +1,103 @@
+{% assign omni = false %}
+{% assign core = false %}
+{% assign log_out = true %}
+
+{% if current_person.signed_in? %}
+  {% assign log_out = false %}
+  {% for group in current_person.groups %}
+    {% if group.name contains 'Core' %}
+      {% assign core = true %}
+      {% elsif group.name contains 'Omni' %}
+        {% assign omni = true %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% if log_out %}
+  <script>
+    window.location.replace('https://academy.cin7.com/learners/sign_in');
+  </script>
+{% endif %}
+
+{% include "header" %}
+<div class="hero-homepage">
+  <div class="np-max-width">
+    <div class="hero-text">Learning Paths</div>
+    <div class="hero-subheading">Explore curated learning paths tailored to your function and role.</div>
+  </div>
+</div>
+<main class="np-main np-learning-paths np-subpage-container catalog-container np-max-width">
+  {% comment %} <div class="filter-container">
+    {% include 'filters_lp' %}
+  </div> {% endcomment %}
+  <div class="catalog-content-wrapper">
+    <div class="np-learning-paths-main np-max-width">
+      {% include "learning_paths_index", items: learning_paths.available %}
+      </div>
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+  .catalog-container {
+  display: flex;
+  gap: 20px;
+  padding: 5% 20px;
+}
+.filter-container {
+  width: 25%;
+  margin: 10px;
+}
+
+.filters-container {
+  width: 20%;
+  border: 3px solid #002e6e;
+  border-radius: 25px;
+}
+.catalog-courses-container {
+  width: 100%;
+}
+@media only screen and (max-width: 768px) {
+  .catalog-container {
+    flex-direction: column;
+    align-items: center;
+  }
+  .filter-container {
+    width: 100%;
+  }
+  .catalog-content-wrapper {
+    width: 100%;
+  }
+}
+
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const categoriesFromURL = urlParams.getAll('category');
+    if (categoriesFromURL.length === 0) {
+        return; 
+    }
+    const cards = document.querySelectorAll('.lp-card');
+
+    const cardMatchesCategories = (card, categories) => {
+        const cardCategories = card.getAttribute('categories').split('[$]');
+        return categories.every(category => cardCategories.includes(category));
+    };
+
+    const filterCards = () => {
+        cards.forEach(card => {
+            if (cardMatchesCategories(card, categoriesFromURL)) {
+                card.style.display = 'block'; 
+            } else {
+                card.style.display = 'none'; 
+            }
+        });
+    };
+
+    filterCards();
+});
+
+</script>