<div id="article-filter" role="menubar" aria-label="Articles filter menu">
  <div class="filter-banner">
    <img src="/sp_common/book-template/ohc-common/css/images/filter-icon.png" role="none">
    <span id="filter-description" class="docs-typography-body-sm docs-typography-secondary">Filters applied</span>
  </div>
  <div class="dropdown" role="menuitem">
    <button id="filter-environment" class="filter-chip dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      <div>
        <span class="docs-typography-body-sm docs-typography-secondary">Environment</span>
        <span class="docs-typography-body-sm docs-semibold">Dedicated Infrastructure</span>
      </div>
    </button>
    <div class="dropdown-menu" aria-labelledby="filter-environment">
      {{#each environments}}
      <label for="environments-field-{{@index}}">
        <div>
          <input type="checkbox" id="environments-field-{{@index}}" name="environment" value="{{this.name}}">
          <span>{{this.name}}</span>
        </div>
      </label>
      {{else}}
      <div class="docs-typography-secondary">No environments</div>
      {{/each}}
    </div>
  </div>
  <div class="dropdown" role="menuitem">
    <button id="filter-audience" class="filter-chip dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      <div>
        <span class="docs-typography-body-sm docs-typography-secondary">Audience</span>
        <span class="docs-typography-body-sm docs-semibold">Any</span>
      </div>
    </button>
    <div class="dropdown-menu" aria-labelledby="filter-audience">
      {{#each audiences}}
      <label for="audiences-field-{{@index}}">
        <div>
          <input type="checkbox" id="audiences-field-{{@index}}" name="audience" value="{{this.name}}">
          <span>{{this.name}}</span>
        </div>
      </label>
      {{else}}
      <div class="docs-typography-secondary">No audiences</div>
      {{/each}}
    </div>
  </div>
</div>
