<section class="gh-canvas tags-view">
    <GhCanvasHeader class="gh-canvas-header tags-header">
        <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"}}" {{action "changeType" "public"}}><span>Public tags</span></button>
                <button class="gh-btn {{if (eq this.type "internal") "gh-btn-group-selected"}}" {{action "changeType" "internal"}}><span>Internal tags</span></button>
            </div>
            <LinkTo @route="tag.new" class="gh-btn gh-btn-green"><span>New tag</span></LinkTo>
        </section>
    </GhCanvasHeader>

    <section class="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">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-min"></div>
                </li>
                <VerticalCollection @items={{this.sortedTags}} @key="id" @containerSelector=".gh-main" @estimateHeight={{60}} @bufferSize={{20}} as |tag|>
                    <GhTagsListItem @tag={{tag}} @data-test-tag-id={{tag.id}} />
                </VerticalCollection>
            {{else}}
                <li class="no-posts-box">
                    <div class="no-posts">
                            {{svg-jar "tags-placeholder" class="gh-tags-placeholder"}}
                            <h3>You haven't created any {{this.type}} tags yet!</h3>
                            <LinkTo @route="tag.new" class="gh-btn gh-btn-green gh-btn-lg">
                                <span>Create a new tag</span>
                            </LinkTo>
                    </div>
                </li>
            {{/if}}
        </ol>
    </section>
</section>

{{outlet}}