<section class="gh-canvas" {{did-insert (action "setMainClass" "gh-main-primarybg" target=this.ui)}}>
    <header class="gh-canvas-header post-header">
        <h2 class="gh-canvas-title" data-test-screen-title>Pages</h2>
        <section class="view-actions">
            <div class="gh-contentfilter">
                {{#unless session.user.isContributor}}
                {{#power-select
                    selected=selectedType
                    options=availableTypes
                    searchEnabled=false
                    onchange=(action (mut k))
                    tagName="div"
                    classNames="gh-contentfilter-menu gh-contentfilter-type"
                    triggerClass="gh-contentfilter-menu-trigger"
                    dropdownClass="gh-contentfilter-menu-dropdown"
                    matchTriggerWidth=false
                    data-test-type-select=true
                    as |type|
                }}
                {{type.name}}
                {{/power-select}}
                {{/unless}}

                {{#unless session.user.isAuthorOrContributor}}
                {{#power-select
                    selected=selectedAuthor
                    options=availableAuthors
                    searchField="name"
                    onchange=(action (mut k))
                    tagName="div"
                    classNames="gh-contentfilter-menu gh-contentfilter-author"
                    triggerClass="gh-contentfilter-menu-trigger"
                    dropdownClass="gh-contentfilter-menu-dropdown"
                    searchPlaceholder="Search authors"
                    matchTriggerWidth=false
                    data-test-author-select=true
                    as |author|
                }}
                {{author.name}}
                {{/power-select}}
                {{/unless}}

                {{#unless session.user.isContributor}}
                {{#power-select
                    selected=selectedTag
                    options=availableTags
                    searchField="name"
                    onchange=(action (mut k))
                    tagName="div"
                    classNames="gh-contentfilter-menu gh-contentfilter-tag"
                    triggerClass="gh-contentfilter-menu-trigger"
                    dropdownClass="gh-contentfilter-menu-dropdown"
                    searchPlaceholder="Search tags"
                    matchTriggerWidth=false
                    optionsComponent="power-select-vertical-collection-options"
                    data-test-tag-select=true
                    as |tag|
                }}
                {{tag.name}}
                {{/power-select}}
                {{/unless}}

                {{#power-select
                    selected=selectedOrder
                    options=availableOrders
                    searchEnabled=false
                    onchange=(action (mut k))
                    tagName="div"
                    classNames="gh-contentfilter-menu gh-contentfilter-sort"
                    triggerClass="gh-contentfilter-menu-trigger"
                    dropdownClass="gh-contentfilter-menu-dropdown"
                    matchTriggerWidth=false
                    data-test-order-select=true
                    as |order|
                }}
                {{order.name}}
                {{/power-select}}
            </div>

            {{#link-to "editor.new" "page" class="gh-btn gh-btn-green" data-test-new-page-button=true}}<span>New page</span>{{/link-to}}
        </section>
    </header>

    <div class="gh-content">
        {{gh-loading-list}}
    </div>
</section>