{{#gh-content-view-container as |previewIsHidden|}}
<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 tagName="section" classNames="content-list-content js-content-scrollbox" fetch="loadNextPage" as |checkScroll|}}
            <ol class="posts-list">
                {{#each sortedPosts key="id" as |post|}}
                    {{#gh-posts-list-item post=post onDoubleClick="openEditor" onDelete=(action checkScroll) as |component|}}
                        {{#link-to (if previewIsHidden 'editor.edit' 'posts.post') 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.publishedAt}}" class="date published">
                                                Published {{gh-format-timeago post.publishedAt}}
                                            </time>
                                        {{/if}}
                                    {{else}}
                                        <span class="draft">Draft</span>
                                    {{/if}}
                                </span>
                            </section>
                        {{/link-to}}
                    {{/gh-posts-list-item}}
                {{/each}}
            </ol>
        {{/gh-infinite-scroll}}
    </section>
    <section class="content-preview js-content-preview {{if postContentFocused 'keyboard-focused'}}">
        {{outlet}}
    </section>
</div>
{{/gh-content-view-container}}

{{#if showDeletePostModal}}
    {{gh-fullscreen-modal "delete-post"
                          model=currentPost
                          close=(action "toggleDeletePostModal")
                          modifier="action wide"}}
{{/if}}