<section class="{{cssClass}} directory flexcol" id="{{cssId}}" data-tab="{{tabName}}">
    <header class="directory-header">
        <div class="header-actions action-buttons flexrow">
            {{#if user.isGM}}
                <button class="create-compendium" type="submit"><i class="fas fa-atlas"></i> {{localize "COMPENDIUM.Create"}}</button>
            {{/if}}
        </div>
        <div class="header-search flexrow">
            <i class="fas fa-search"></i>
            <input type="search" name="search" autocomplete="off" spellcheck="false" placeholder="{{localize "COMPENDIUM.Search"}}" />
        </div>
    </header>

    <ol class="directory-list">
        {{#each packs as |group type|}}
            <li class="compendium-type" data-type="{{type}}">
                <h3 class="noborder">{{localize (concat "DOCUMENT." type)}}</h3>
                <ol class="compendium-list">
                    {{#each group.packs as |pack|}}
                        <li class="compendium-pack directory-item" data-collection="{{pack.collection}}" data-pack="{{pack.collection}}" data-open="0">
                            <h4 class="pack-title">
                                <a><i class="folder fas fa-folder"></i> {{pack.metadata.label}}</a>
                                <div class="status-icons">
                                    {{#if pack.private}}<i class="fas fa-eye-slash"></i>{{/if}}
                                    {{#if pack.locked}}<i class="fas fa-lock"></i>{{/if}}
                                </div>
                            </h4>
                            <footer class="compendium-footer">
                                <span class="document-type">{{localize pack.documentName}}</span>
                                <span> ({{pack.metadata.packageName}})</span>
                            </footer>
                        </li>
                    {{/each}}
                    <ol class="document-matches"></ol>
                </ol>
            </li>
        {{/each}}
    </ol>

    <footer class="directory-footer">
        <button type="button" class="compendium-browser-btn"><i class="fas fa-fire"></i> {{localize "PF2E.CompendiumBrowser.Title"}}</button>
    </footer>

    <template id="compendium-search-match">
        <li class="match" >
            <div class="thumbnail"><img /></div>
            <a class="name"></a>
            <span class="details"></span>
        </li>
    </template>
</section>
