{{#gh-content-view-container as |container|}}
<header class="view-header">
    {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Content</span>{{/gh-view-title}}
    <section class="view-actions">
        {{#link-to "editor.new" class="btn btn-green" title="New Post"}}New Post{{/link-to}}
    </section>
</header>

<div class="view-container">
    <section class="content-list js-content-list {{if postListFocused 'keyboard-focused'}}">
        {{#gh-infinite-scroll-box tagName="section" classNames="content-list-content js-content-scrollbox" fetch="loadNextPage"}}
            <ol class="posts-list">
                {{#each sortedPosts key="id" as |post|}}
                    {{#gh-posts-list-item post=post active=(is-equal post currentPost) onDoubleClick="openEditor" previewIsHidden=container.previewIsHidden as |component|}}
                        {{#link-to component.viewOrEdit post.id class="permalink" title="Edit this post"}}
                            <h3 class="entry-title">{{post.title}}</h3>
                            <section class="entry-meta">
                                <span class="avatar" style={{component.authorAvatarBackground}}>
                                    <img src="{{component.authorAvatar}}" title="{{component.authorName}}">
                                </span>
                                <span class="author">{{component.authorName}}</span>
                                <span class="status">
                                    {{#if component.isPublished}}
                                        {{#if post.page}}
                                            <span class="page">Page</span>
                                        {{else}}
                                            <time datetime="{{post.published_at}}" class="date published">
                                                Published {{gh-format-timeago post.published_at}}
                                            </time>
                                        {{/if}}
                                    {{else}}
                                        <span class="draft">Draft</span>
                                    {{/if}}
                                </span>
                            </section>
                        {{/link-to}}
                    {{/gh-posts-list-item}}
                {{/each}}
            </ol>
        {{/gh-infinite-scroll-box}}
    </section>
    <section class="content-preview js-content-preview {{if postContentFocused 'keyboard-focused'}}">
        {{outlet}}
    </section>
</div>
{{/gh-content-view-container}}