<GhBasicDropdown @verticalPosition="below" as |dd|>
    <dd.Trigger class="gh-btn gh-btn-icon gh-btn-action-icon">
        <span class={{if @excludedEvents "gh-btn-label-green"}}>
            {{svg-jar "filter"}}
            Filter events
        </span>
    </dd.Trigger>

    <dd.Content class="gh-member-activity-actions-menu dropdown-menu dropdown-triangle-top-right">
        {{!-- NOTE: re-using ember-power-select-options styles --}}
        <ul class="ember-power-select-options" role="listbox">
            {{#each this.eventTypes as |type idx|}}
                <li class="form-group ember-power-select-option mb0 for-checkbox">
                    <label class="checkbox" for="type-{{idx}}">
                        <input
                            type="checkbox"
                            checked={{type.isSelected}}
                            id="type-{{idx}}"
                            name="eventTypes"
                            class="gh-input post-settings-featured"
                            {{on "input" (fn this.toggleEventType type.event)}}>
                        <span class="input-toggle-component"></span>
                        <p>{{type.name}}</p>
                    </label>
                </li>
            {{/each}}
        </ul>
    </dd.Content>
</GhBasicDropdown>