<div class="role-select container">
 <div class="role-select-title">
  Library
 </div>
  <div class="role-select-list row">
    <a class="role-select-item col-12 col-md-6 col-xl-3" href="#administrators">
      <div class="role-select-item-container">
        <img class="role-select-image" src="https://cdn.northpass.io/Cayuse/admin.jpg">
        <div class="role-select-item-text">
          <div class="role-select-item-name">
            Administrators
          </div>
        </div>
      </div>
    </a>
    <a class="role-select-item col-12 col-md-6 col-xl-3" href="#researchers">
      <div class="role-select-item-container">
        <img class="role-select-image" src="https://cdn.northpass.io/Cayuse/researcher.jpg">
        <div class="role-select-item-text">
          <div class="role-select-item-name">
            Researchers
          </div>
        </div>
      </div>
    </a>
    <a class="role-select-item col-12 col-md-6 col-xl-3" href="#it-managers">
      <div class="role-select-item-container">
        <img class="role-select-image" src="https://cdn.northpass.io/Cayuse/it_manager.jpg">
        <div class="role-select-item-text">
          <div class="role-select-item-name">
            IT Managers
          </div>
        </div>
      </div>
    </a>
    <a class="role-select-item col-12 col-md-6 col-xl-3" href="#staff">
      <div class="role-select-item-container">
        <img class="role-select-image" src="https://cdn.northpass.io/Cayuse/staff.jpg">
        <div class="role-select-item-text">
          <div class="role-select-item-name">
            Staff
          </div>
        </div>
      </div>
    </a>
  </div>
</div>

<script>
  addEventListener("hashchange", () => {
    showCourses(location.hash.replace('#', ''));
  });
  addEventListener('DOMContentLoaded', () => {
    showCourses(location.hash.replace('#', ''));
  })
  
  const roleDescriptions = {
    'administrators': {
      name: 'Courses for Administrators',
    },
    'researchers': {
      name: 'Courses for Researchers',
    },
    'it-managers': {
      name: 'Courses for IT Managers',
    },
    'staff': {
      name: 'Courses for Staff',
    }
  }
  
  function showCourses(name) {
    let coursesParent = document.querySelector('.courses-wrapper')
    let roleSelectElement = document.querySelector('.role-select');
    
    if (!name) {
      if (roleSelectElement.classList.contains('np-hidden')) {
        roleSelectElement.classList.remove('np-hidden');
        document.querySelector('.courses-list').classList.add('np-hidden');
      }
    } else if (roleDescriptions[name]) {
      coursesParent.querySelectorAll('[course-role]').forEach(x => {
        if (x.getAttribute('course-role') === name) {
          x.classList.remove('role-hidden');
        } else {
          x.classList.add('role-hidden');
        }
      });
      
      document.querySelectorAll('[filter-category]:not([filter-category="ALL"])').forEach( x => {
        if (coursesParent.querySelector(`[course-category*="${x.getAttribute('filter-category')}"][course-role="${name}"]`)) {
          x.classList.remove('role-hidden');
        } else {
          x.classList.add('role-hidden');
        }
      });
      
      document.querySelector('.courses-list-title').innerText = roleDescriptions[name].name;

      if (!roleSelectElement.classList.contains('np-hidden')) {
        roleSelectElement.classList.add('np-hidden');
        document.querySelector('.courses-list').classList.remove('np-hidden');
      }
    }
  }
</script>