<vdr-action-bar>
    <vdr-ab-left>
        <clr-checkbox-wrapper class="expand-all-toggle">
            <input type="checkbox" clrCheckbox [(ngModel)]="expandAll" />
            <label>{{ 'catalog.expand-all-collections' | translate }}</label>
        </clr-checkbox-wrapper>
    </vdr-ab-left>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="collection-list"></vdr-action-bar-items>
        <a class="btn btn-primary" *vdrIfPermissions="'CreateCatalog'" [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"
        (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>
