<vdr-action-bar>
    <vdr-ab-left>
        <div class="flex center wrap">
            <vdr-language-selector
                class="mt2"
                [availableLanguageCodes]="availableLanguages$ | async"
                [currentLanguageCode]="contentLanguage$ | async"
                (languageCodeChange)="setLanguage($event)"
            ></vdr-language-selector>
            <clr-checkbox-wrapper
                class="expand-all-toggle ml3"
                [ngClass]="(availableLanguages$ | async)?.length === 1 ? 'mt3' : 'mt1'"
            >
                <input type="checkbox" clrCheckbox [(ngModel)]="expandAll" (change)="toggleExpandAll()"/>
                <label>{{ 'catalog.expand-all-collections' | translate }}</label>
            </clr-checkbox-wrapper>
            <input
                type='text'
                name='searchTerm'
                [formControl]='filterTermControl'
                [placeholder]="'catalog.filter-by-name' | translate"
                class='clr-input search-input ml4'
            />
        </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="collection-wrapper">
    <vdr-collection-tree
        [collections]="items$ | async"
        [activeCollectionId]="activeCollectionId$ | async"
        [expandAll]="expandAll"
        [expandedIds]="expandedIds"
        (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>
