<div class="page-content">
    <section class="content-list js-content-list {{if postListFocused 'keyboard-focused'}}">
        {{#view "paginated-scroll-box" tagName="section" classNames="content-list-content js-content-scrollbox"}}
        <ol class="posts-list">
            {{#each post in controller itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
                {{#link-to "posts.post" post.model class="permalink" alternateActive=view.active title="Edit this post"}}
                    <h3 class="entry-title">{{post.model.title}}</h3>
                    <section class="entry-meta">
                        <span class="avatar" style={{post.authorAvatarBackground}}>
                            <img src="{{post.authorAvatar}}" title="{{post.authorName}}">
                        </span>
                        <span class="author">{{post.authorName}}</span>
                        <span class="status">
                            {{#if post.isPublished}}
                                {{#if post.model.page}}
                                    <span class="page">Page</span>
                                {{else}}
                                    <time datetime="{{post.model.published_at}}" class="date published">
                                        Published {{gh-format-timeago post.model.published_at}}
                                    </time>
                                {{/if}}
                            {{else}}
                                <span class="draft">Draft</span>
                            {{/if}}
                        </span>
                    </section>
                {{/link-to}}
            {{/each}}
        </ol>
        {{/view}}
    </section>
    <section class="content-preview js-content-preview {{if postContentFocused 'keyboard-focused'}}">
        {{outlet}}
    </section>
</div>