<section class="gh-view">
    <header class="view-header">
        {{#gh-view-title}}<span>Tags</span>{{/gh-view-title}}
        <section class="view-actions">
            {{#link-to "settings.tags.new" class="gh-btn gh-btn-green"}}<span>New Tag</span>{{/link-to}}
        </section>
    </header>

    {{#gh-tags-management-container tags=tags selectedTag=selectedTag enteredMobile="enteredMobile" leftMobile=(action "leftMobile") as |container|}}
        <div class="tag-list">
            <section class="tag-list-content settings-tags {{if tagListFocused 'keyboard-focused'}}">
                {{#vertical-collection sortedTags
                    estimateHeight=16
                    minHeight=67
                    bufferSize=5
                    containerSelector=".tag-list"
                    as |tag|
                }}
                    {{gh-tag tag=tag}}
                {{/vertical-collection}}
            </section>
        </div>
        <section class="settings-menu-container tag-settings {{if tagContentFocused 'keyboard-focused'}} {{if container.displaySettingsPane 'tag-settings-in'}}">
            {{outlet}}
        </section>
    {{/gh-tags-management-container}}
</section>
