<div class="gh-contentfilter view-actions-bottom-row" ...attributes>

    <div class="gh-contentfilter-menu gh-contentfilter-type {{if @selectedType.value "gh-contentfilter-selected"}}" data-test-type-select="true">
        <PowerSelect
            @selected={{@selectedType}}
            @options={{@availableTypes}}
            @searchEnabled={{false}}
            @onChange={{@onTypeChange}}
            @triggerComponent={{component "gh-power-select/trigger"}}
            @triggerClass="gh-contentfilter-menu-trigger"
            @dropdownClass="gh-contentfilter-menu-dropdown"
            @matchTriggerWidth={{false}}
            as |type|
        >
            {{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
        </PowerSelect>
    </div>

    {{#unless @currentUser.isContributor}}
        <div class="gh-contentfilter-menu gh-contentfilter-visibility {{if @selectedVisibility.value "gh-contentfilter-selected"}}" data-test-visibility-select="true">
            <PowerSelect
                @selected={{@selectedVisibility}}
                @options={{@availableVisibilities}}
                @searchEnabled={{false}}
                @onChange={{@onVisibilityChange}}
                @triggerComponent={{component "gh-power-select/trigger"}}
                @triggerClass="gh-contentfilter-menu-trigger"
                @dropdownClass="gh-contentfilter-menu-dropdown"
                @matchTriggerWidth={{false}}
                as |visibility|
            >
                {{#if visibility.name}}{{visibility.name}}{{else}}<span class="red">Unknown visibility</span>{{/if}}
            </PowerSelect>
        </div>
    {{/unless}}

    {{#unless @currentUser.isAuthorOrContributor}}
        <div class="gh-contentfilter-menu gh-contentfilter-author {{if @selectedAuthor.slug "gh-contentfilter-selected"}}" data-test-author-select="true">
            <PowerSelect
                @selected={{@selectedAuthor}}
                @options={{@availableAuthors}}
                @searchField="name"
                @onChange={{@onAuthorChange}}
                @triggerComponent={{component "gh-power-select/trigger"}}
                @triggerClass="gh-contentfilter-menu-trigger"
                @dropdownClass="gh-contentfilter-menu-dropdown"
                @searchPlaceholder="Search authors"
                @matchTriggerWidth={{false}}
                as |author|
            >
                {{#if author.name}}{{author.name}}{{else}}<span class="red">Unknown author</span>{{/if}}
            </PowerSelect>
        </div>
    {{/unless}}

    {{#unless @currentUser.isContributor}}
        <div class="gh-contentfilter-menu gh-contentfilter-tag {{if @selectedTag.slug "gh-contentfilter-selected"}}" data-test-tag-select="true">
            <PowerSelect
                @selected={{@selectedTag}}
                @options={{@availableTags}}
                @onOpen={{@loadInitialTags}}
                @searchEnabled={{true}}
                @search={{perform @searchTagsTask}}
                @searchField="name"
                @onChange={{@onTagChange}}
                @triggerComponent={{component "gh-power-select/trigger"}}
                @triggerClass="gh-contentfilter-menu-trigger"
                @dropdownClass="gh-contentfilter-menu-dropdown"
                @searchPlaceholder="Search tags"
                @matchTriggerWidth={{false}}
                @optionsComponent={{component "power-select-vertical-collection-options" lastReached=this.onLastReached}}
                @registerAPI={{this.registerTagsPowerSelect}}
                as |tag|
            >
                {{#if tag.name}}{{tag.name}}{{else}}<span class="red">Unknown tag</span>{{/if}}
            </PowerSelect>
        </div>
    {{/unless}}

    <div class="gh-contentfilter-menu gh-contentfilter-sort" data-test-order-select="true">
        <PowerSelect
            @selected={{@selectedOrder}}
            @options={{@availableOrders}}
            @searchEnabled={{false}}
            @onChange={{@onOrderChange}}
            @triggerComponent={{component "gh-power-select/trigger"}}
            @triggerClass="gh-contentfilter-menu-trigger"
            @dropdownClass="gh-contentfilter-menu-dropdown"
            @matchTriggerWidth={{false}}
            as |order|
        >
            {{#if order.name}}{{order.name}}{{else}}<span class="red">Unknown</span>{{/if}}
        </PowerSelect>
    </div>

    {{#if this.showCustomViewManagement}}
        <div class="dropdown gh-contentfilter-menu gh-contentfilter-actions">
            {{#if this.customViews.activeView}}
                <button
                    type="button"
                    class="gh-contentfilter-menu-trigger gh-contentfilter-button gh-btn-save-view"
                    title="Edit current view..."
                    data-test-button="edit-view"
                    {{on "click" this.customViews.editView}}
                >
                    {{svg-jar "edit-view"}}
                </button>
            {{else}}
                <button
                    type="button"
                    class="gh-contentfilter-menu-trigger gh-contentfilter-button gh-btn-save-view"
                    title="Save as view..."
                    data-test-button="add-view"
                    {{on "click" this.customViews.editView}}
                >
                    {{svg-jar "add-view"}}
                </button>
            {{/if}}
        </div>
    {{/if}}
</div>