<section class="gh-canvas">
    <form class="mb15">
        <GhCanvasHeader class="gh-canvas-header">
            <div class="flex flex-column">
                <div class="gh-canvas-breadcrumb">
                    <LinkTo @route="collections" data-test-link="collections-back">
                        Collections
                    </LinkTo>
                    {{svg-jar "arrow-right-small"}} {{if this.collection.isNew "New collection" "Edit collection"}}
                </div>
                <h2 class="gh-canvas-title" data-test-screen-title>
                    {{if this.collection.isNew "New collection" this.collection.title}}
                </h2>
            </div>

            <section class="view-actions">
                <GhTaskButton
                    @task={{this.saveTask}}
                    @type="button"
                    @class="gh-btn gh-btn-primary gh-btn-icon"
                    @data-test-button="save"
                    {{on-key "cmd+s"}}
                />
            </section>
        </GhCanvasHeader>

        <Collections::CollectionForm @collection={{this.model}} />
    </form>

    {{#unless this.collection.isNew}}
        <div>
            <button type="button" class="gh-btn gh-btn-red gh-btn-icon" {{on "click" this.confirmDeleteCollection}} data-test-button="delete-collection">
                <span>Delete collection</span>
            </button>
        </div>
    {{/unless}}

    {{#if this.collection.postIds}}
    <div class="gh-main-section">
        <h3>Collection has {{this.collection.postIds.length}} posts</h3>
        <ol class="gh-list">
            {{#each this.collection.postIds as |post|}}
            <li class="gh-list-row"><a href="#/editor/post/{{post}}">{{post}}</a></li>
            {{/each}}
        </ol>
    </div>
    {{/if}}
</section>
