<div class="modal-content" {{on-key "Enter" (perform this.deleteCollectionTask)}} data-test-modal="confirm-delete-collection">
    <header class="modal-header">
        <h1>Are you sure you want to delete this collection?</h1>
    </header>
    <button type="button" class="close"title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>

    <div class="modal-body">
        {{#if @data.collection.count.posts}}
            <span class="red">This collection is attached to <span data-test-text="posts-count">{{gh-pluralize @data.collection.count.posts "post"}}</span>.</span>
        {{/if}}
        You're about to delete "<strong>{{@data.collection.title}}</strong>". This is permanent! We warned you, k?
    </div>

    <div class="modal-footer">
        <button class="gh-btn" type="button" {{on "click" @close}} data-test-button="cancel"><span>Cancel</span></button>
        <GhTaskButton @buttonText="Delete" @successText="Deleted" @task={{this.deleteCollectionTask}}
            @class="gh-btn gh-btn-red gh-btn-icon" data-test-button="confirm" />
    </div>
</div>
