<div class="np-filter training-event-filter">
  <div class="dropdown training-event-dropdown">
    <button
      class="np-button dropdown-button training-event-dropdown-button"
      data-toggle-class="is-open"
      data-toggle-escape
      data-toggle-outside
      data-toggle-target-next
      type="button"
      onclick="openNav()"
    >
      {% t shared.filters.filter %}
    </button>

    <div id="myNav" class="overlay">
      <!-- Button to close the overlay navigation -->


      <!-- Overlay content -->
      <div class="overlay-content">
        <div class="overlay-items-container">
          <div class="overlay-items-headers">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
              <i style="color: #0088DD;" class="far fa-angle-down"></i>
            </a>
            <p class="filter-title">Filter</p>
            <div class="all-filter" id="all">Clear All</div>
          </div>
          <div class="filter-container">
 
            <p class="filter-category">Region</p>
            <div class="circle-container region-circle" id="us">
              <span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">US</p>
            </div>
            <div class="circle-container region-circle" id="uk">
              <span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">UK</p>
            </div>
         {% comment %}
            <div class="circle-container region-circle" id="global">
              <span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Global</p>
            </div>
            {% endcomment %}
            <p class="filter-category">Product</p>
            <div class="circle-container product-circle" id="talent-acquisition">
              <span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Talent Acquisition</p>
            </div>
            <div class="circle-container product-circle" id="workforce-management">
              <span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Workforce Management</p>
            </div>
          </div>
          <div style="" class="apply-button-container">
            <div class="apply-button np-button" id="apply-button">Apply</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
