{{!-- template-lint-disable no-invalid-interactive --}}
<div class="gh-post-history" {{did-insert this.onInsert}}>
    <div class="gh-post-history-main" data-test-post-history-preview>
        <div class="gh-koenig-editor-pane flex flex-column mih-100">
            {{#if this.selectedHTML}}
                {{{this.selectedHTML}}}
            {{/if}}
            <div class="gh-post-history-hidden-lexical current">
                <div class="gh-editor-feature-image-container">
                    <div class="gh-editor-feature-image">
                        {{#if this.selectedRevision.feature_image}}
                            <img
                                src={{this.selectedRevision.feature_image}}
                                alt={{this.selectedRevision.feature_image_alt}}
                                data-test-post-history-preview-feature-image
                            >
                        {{/if}}
                        {{#if this.selectedRevision.feature_image_caption}}
                            <p data-test-post-history-preview-feature-image-caption>{{{this.selectedRevision.feature_image_caption}}}</p>
                        {{/if}}
                    </div>
                </div>
                <div class="gh-editor-title" data-test-post-history-preview-title>
                    {{this.currentTitle}}
                </div>
                {{#if (feature "editorExcerpt")}}
                    <div class="gh-editor-excerpt" data-test-post-history-preview-excerpt>
                        {{this.selectedRevision.custom_excerpt}}
                    </div>
                    <hr class="gh-editor-title-divider">
                {{/if}}
                <KoenigLexicalEditor
                    @lexical={{this.selectedRevision.lexical}}
                    @cardConfig={{this.cardConfig}}
                    @registerAPI={{this.registerSelectedEditorApi}}
                    @registerSecondaryAPI={{this.registerSecondarySelectedEditorApi}}
                />
            </div>
        </div>
    </div>
    <div class="settings-menu-container">
        <div class="settings-menu settings-menu-pane settings-menu-pane-main">
            <div class="settings-menu-header subview">
                <button
                    aria-label="Close meta data panel"
                    class="back settings-menu-header-action"
                    data-test-button="close-psm-subview"
                    type="button"
                    {{on "click" this.closeModal}}
                    {{on "mousedown" (optional this.noop)}}
                >
                    {{svg-jar "arrow-left"}}
                    <span class="hidden">Back</span>
                </button>
                <h4>{{capitalize this.post.displayName}} history</h4>
            </div>
            <div class="settings-menu-content">
                <ul class="nav-list">
                    {{#each this.revisionList as |revision index|}}
                    <li class="nav-list-item {{if revision.selected "selected" ""}}" data-test-revision-item={{index}}>
                        <button type="button" {{on "click" (fn this.handleClick index)}} data-test-button="preview-revision">
                            <div class="flex items-center">
                                <span class="gh-post-history-version">{{gh-format-post-time revision.createdAt format="D MMM YYYY, HH:mm"}}{{this.timezone}}</span>
                                {{#if revision.latest}}
                                    <span class="gh-post-history-version-tag current" data-test-revision-latest>Latest</span>
                                {{/if}}

                                {{#if revision.new_publish}}
                                    <span class="gh-post-history-version-tag published" data-test-revision-published>Published</span>
                                {{/if}}
                                {{#if (eq revision.reason "unpublished")}}
                                    <span class="gh-post-history-version-tag unpublished" data-test-revision-unpublished>Unpublished</span>
                                {{/if}}

                            </div>
                            <div class="flex items-center mt2">
                                <span class="user-list-item-figure" style={{background-image-style revision.author.profile_image_url}}>
                                    <span class="hidden">Photo of {{revision.author.name}}</span>
                                </span>
                                <span class="gh-post-history-version-meta {{if (eq revision.author.name "Deleted staff user") "deleted-user"}}">{{revision.author.name}}</span>
                            </div>
                        </button>
                        {{#if (and revision.selected (not revision.latest))}}
                            <button
                                type="button"
                                class="gh-post-history-version-restore"
                                {{on "click" (fn this.restoreRevision index)}}
                                data-test-button="restore-revision"
                            >
                                <span>Restore</span>
                            </button>
                        {{/if}}
                    </li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </div>
</div>
{{this.didInsert}}