<section class="gh-canvas gh-post-restore" {{did-insert this.loadData}}>
    <GhCanvasHeader class="gh-canvas-header gh-post-restore-header">
        <div class="flex flex-column flex-grow-1">
            <h2 class="gh-canvas-title">
                Restore Posts
            </h2>
        </div>
    </GhCanvasHeader>
    <section class="view-container content-list">
        <p>Posts are regularly saved locally on your device. If you've lost a post, you can restore it from here as long as too much time hasn't passed.</p>
        <ol class="revisions-list gh-list {{unless this.model.length "no-revisions"}}">
            {{#if this.model.length}}
                <li class="gh-list-row header">
                    <div class="gh-list-header gh-list-cellwidth-70">Title</div>
                    <div class="gh-list-header gh-list-cellwidth-20">Created</div>
                    <div class="gh-list-header gh-list-cellwidth-10"></div>
                </li>
                <VerticalCollection @items={{this.model}} @key="key" @containerSelector=".gh-main" @estimateHeight={{60}} @bufferSize={{20}} as |revision|>
                    <li class="gh-list-row">
                        <div class="gh-list-data gh-list-cellwidth-70">
                            <h3 class="gh-revision-title" data-test-id="restore-post-title">{{if revision.title revision.title "(no title)"}}</h3>
                            <p class="gh-revision-excerpt">{{truncate revision.excerpt 100}}</p>
                        </div>
                        <div class="gh-list-data gh-list-cellwidth-20">
                            {{moment-format revision.revisionTimestamp "MMM D, YYYY HH:mm"}}
                        </div>
                        <div class="gh-list-data gh-list-cellwidth-10">
                            <GhTaskButton
                                @task={{this.restorePostTask}}
                                @taskArgs={{revision}}
                                @buttonText="Restore"
                                @showSuccess={{false}}
                                @showIcon={{false}}
                                @class="gh-btn gh-btn-icon gh-btn-sm"
                                data-test-id="restore-post-button"
                            />
                        </div>
                    </li>
                </VerticalCollection>
            {{else}}
                <li class="no-revisions-box">
                    <div class="no-revisions">
                        {{svg-jar "revision-placeholder" class="gh-revisions-placeholder"}}
                        <h4>No local revisions found.</h4>
                    </div>
                </li>
            {{/if}}
        </ol>
    </section>
</section>