<section class="gh-canvas">
    <header class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>Your stories</h2>
        <section class="view-actions">
            {{#link-to "editor.new" class="gh-btn gh-btn-green" data-test-new-post-button=true}}<span>New story</span>{{/link-to}}
        </section>
    </header>
    <div class="gh-contentfilter">
        <div class="gh-contentfilter-left">
            {{#unless session.user.isContributor}}
            {{#power-select
                selected=selectedType
                options=availableTypes
                searchEnabled=false
                onchange=(action "changeType")
                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 "changeAuthor")
                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 "changeTag")
                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}}
        </div>

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

    <section class="content-list">
        <ol class="posts-list">
            {{#each postsInfinityModel as |post|}}
                {{gh-posts-list-item
                    post=post
                    onDoubleClick=(action "openEditor")
                    data-test-post-id=post.id}}
            {{else}}
                <li class="no-posts-box">
                    <div class="no-posts">
                        {{#if showingAll}}
                            <h3>You haven't written any stories yet!</h3>
                            {{#link-to "editor.new"}}<button type="button" class="gh-btn gh-btn-green gh-btn-lg"><span>Write a new Story</span></button>{{/link-to}}
                        {{else}}
                            <h3>No stories match the current filter</h3>
                            {{#link-to "posts.index" (query-params type=null author=null tag=null)}}<button type="button" class="gh-btn gh-btn-lg"><span>Show all stories</span></button>{{/link-to}}
                        {{/if}}
                    </div>
                </li>
            {{/each}}
        </ol>

        {{gh-infinity-loader
            infinityModel=postsInfinityModel
            scrollable=".gh-main"
            triggerOffset=1000}}
    </section>

    {{outlet}}
</section>
