<vdr-action-bar>
    <vdr-ab-left>
        <div class="">
            <input
                type="text"
                name="searchTerm"
                [formControl]="filterTermControl"
                [placeholder]="'catalog.filter-by-name' | translate"
                class="clr-input search-input"
            />
            <div class="flex center">
                <clr-toggle-wrapper
                    class="expand-all-toggle mt-2"
                >
                    <input type="checkbox" clrToggle [(ngModel)]="expandAll" (change)="toggleExpandAll()" />
                    <label>
                        {{ 'catalog.expand-all-collections' | translate }}
                    </label>
                </clr-toggle-wrapper>
                <vdr-language-selector
                    class="mt-2"
                    [availableLanguageCodes]="availableLanguages$ | async"
                    [currentLanguageCode]="contentLanguage$ | async"
                    (languageCodeChange)="setLanguage($event)"
                ></vdr-language-selector>
            </div>
        </div>
    </vdr-ab-left>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="collection-list"></vdr-action-bar-items>
        <a
            class="btn btn-primary"
            *vdrIfPermissions="['CreateCatalog', 'CreateCollection']"
            [routerLink]="['./create']"
        >
            <clr-icon shape="plus"></clr-icon>
            {{ 'catalog.create-new-collection' | translate }}
        </a>
    </vdr-ab-right>
</vdr-action-bar>
<div class="bulk-select-controls">
    <input
        type="checkbox"
        clrCheckbox
        [checked]="selectionManager.areAllCurrentItemsSelected()"
        (click)="selectionManager.toggleSelectAll()"
    />
    <vdr-bulk-action-menu
        class="ml2"
        locationId="collection-list"
        [hostComponent]="this"
        [selectionManager]="selectionManager"
    ></vdr-bulk-action-menu>
</div>
<div class="collection-wrapper">
    <vdr-collection-tree
        [collections]="items$ | async"
        [activeCollectionId]="activeCollectionId$ | async"
        [expandAll]="expandAll"
        [expandedIds]="expandedIds"
        [selectionManager]="selectionManager"
        (rearrange)="onRearrange($event)"
        (deleteCollection)="deleteCollection($event)"
    ></vdr-collection-tree>

    <div class="collection-contents" [class.expanded]="activeCollectionId$ | async">
        <vdr-collection-contents [collectionId]="activeCollectionId$ | async">
            <ng-template let-count>
                <div class="collection-title">
                    {{ activeCollectionTitle$ | async }} ({{
                        'common.results-count' | translate: { count: count }
                    }})
                </div>
                <button type="button" class="close-button" (click)="closeContents()">
                    <clr-icon shape="close"></clr-icon>
                </button>
            </ng-template>
        </vdr-collection-contents>
    </div>
</div>
