{% assign categories = "$Commercial Lines,$Gen. Ins. & Risk Mgmt.,$Leadership & Prof. Dev.,Onboarding,$Personal Lines,$Sales & Service" | split: ","%}

<div class="filter-container">
    <div class="dropdown">
        <button class="dropbtn">Type <i class="fal fa-chevron-down"></i></button>
        <div class="dropdown-content">
          <a href="/app/catalog?type=learning_path">Learning Paths <i class="far fa-external-link-alt"></i></a>
          <a href="/app/catalog?type=course">Courses <i class="far fa-external-link-alt"></i></a>
        </div>
      </div>
    
      <div class="dropdown">
        <button class="dropbtn">Categories <i class="fal fa-chevron-down"></i></button>
        <div class="dropdown-content">
          {% assign unique_categories = "" %}
            {% for course in courses.in_catalog %}
                {% for category in course.categories %}
                  {% if categories contains category.name%}
                    {% unless unique_categories contains category.name %}    
                      <a class="category-filter" href="/app/catalog?category={{category.name}}">{{category.name }} <i class="far fa-external-link-alt"></i></a>
                      {% assign unique_categories = unique_categories | append: category.name  %}
                    {% endunless %}
                  {%endif%}
                {% endfor %}
            {% endfor %}
        </div>
      </div>
    
      <div class="dropdown">
        <a class="dropbtn dropbtn-link" href="/app/catalog">Catalog
          <img src="https://s3.amazonaws.com/static.northpass.com/Chubb/assets/Folders.svg" alt="folders" class="link-icon">
        </a>
      </div>
      <div class="dropdown">
        <a class="dropbtn dropbtn-link" href="/app/dashboard">Dashboard
            <img src="https://s3.amazonaws.com/static.northpass.com/Chubb/assets/Contact.svg" alt="contact" class="link-icon">
        </a>

      </div>

</div>

  <style>
    .dropbtn-link {
      text-decoration: none;
    }
    .dropbtn {
      background-color: #e7e5e6;
      color: #000;
      padding: 10px;
      font-size: 14px;
      border: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .dropdown {
      position: relative;
      display: inline-block;
      margin-right: 10px; 
      flex: 1;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      width: 100%;
    }

    .dropdown-content a {
      color: black;
      padding: 10px;
      text-decoration: none;
      display: flex;
      justify-content: space-between;
    }

    .dropdown-content i {
        opacity: 0.75;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown:hover .dropbtn {
      background-color: #bcbabe;
    }
    .filter-container {
        display: flex;
        justify-content: space-between;
        max-width: 1440px;
        margin: 0 20px;
    }
    .link-icon {
      width: 15px;
    }
  </style>


  
  