<vdr-action-bar>
    <vdr-ab-right>
        <a class="btn btn-primary" [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"
        (rearrange)="onRearrange($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>
