<section class="gh-canvas" {{on-key "c" this.newTag}}>
    <GhCanvasHeader class="gh-canvas-header sticky">
        <h2 class="gh-canvas-title" data-test-screen-title>Tags</h2>
        <section class="view-actions">
            <div class="gh-contentfilter gh-btn-group">
                <button class="gh-btn {{if (eq this.type "public") "gh-btn-group-selected"}}" type="button" {{action "changeType" "public"}} data-test-tags-nav="public" data-test-active={{eq this.type "public"}}><span>Public tags</span></button>
                <button class="gh-btn {{if (eq this.type "internal") "gh-btn-group-selected"}}" type="button" {{action "changeType" "internal"}} data-test-tags-nav="internal" data-test-active={{eq this.type "internal"}}><span>Internal tags</span></button>
            </div>
            <LinkTo @route="tag.new" class="gh-btn gh-btn-primary"><span>New tag</span></LinkTo>
        </section>
    </GhCanvasHeader>

    <section class="view-container content-list">
        <ol class="tags-list gh-list {{unless this.sortedTags "no-posts"}}">
            {{#if this.sortedTags}}
                <li class="gh-list-row header">
                    <div class="gh-list-header gh-list-cellwidth-70">Tag</div>
                    <div class="gh-list-header gh-list-cellwidth-10">Slug</div>
                    <div class="gh-list-header gh-list-cellwidth-10">No. of posts</div>
                    <div class="gh-list-header gh-list-cellwidth-10"></div>
                </li>
                <VerticalCollection
                    @items={{this.sortedTags}}
                    @key="id"
                    @containerSelector=".gh-main"
                    @estimateHeight={{60}}
                    @bufferSize={{20}}
                    @lastReached={{this.loadMoreTags}}
                as |tag|>
                    <Tags::ListItem @tag={{tag}} data-test-tag={{tag.id}} />
                </VerticalCollection>
            {{else}}
                <li class="no-posts-box">
                    <div class="no-posts">
                            {{svg-jar "tags-placeholder" class="gh-tags-placeholder"}}
                            <h4>Start organizing your content.</h4>
                            <LinkTo @route="tag.new" class="gh-btn gh-btn-green">
                                <span>Create a new tag</span>
                            </LinkTo>
                    </div>
                </li>
            {{/if}}
        </ol>
    </section>
</section>

{{outlet}}