<ng-template vdrDialogTitle>
    <div class="title-row">
        {{ 'catalog.select-assets' | translate }}
        <vdr-asset-file-input
            (selectFiles)="createAssets($event)"
            dropZoneTarget=".modal-content"
        ></vdr-asset-file-input>
    </div>
</ng-template>
<input
    type="text"
    name="searchTerm"
    [formControl]="searchTerm"
    [placeholder]="'catalog.search-asset-name' | translate"
    class="clr-input search-input"
/>
<vdr-asset-gallery
    [assets]="assets$ | async | paginate: paginationConfig"
    [multiSelect]="true"
    (selectionChange)="selection = $event"
></vdr-asset-gallery>

<div class="paging-controls">
    <vdr-items-per-page-controls
        [itemsPerPage]="paginationConfig.itemsPerPage"
        (itemsPerPageChange)="itemsPerPageChange($event)"
    ></vdr-items-per-page-controls>

    <vdr-pagination-controls
        [currentPage]="paginationConfig.currentPage"
        [itemsPerPage]="paginationConfig.itemsPerPage"
        [totalItems]="paginationConfig.totalItems"
        (pageChange)="pageChange($event)"
    ></vdr-pagination-controls>
</div>

<ng-template vdrDialogButtons>
    <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    <button type="submit" (click)="select()" class="btn btn-primary" [disabled]="selection.length === 0">
        {{ 'catalog.add-asset-to-product' | translate: { count: selection.length } }}
    </button>
</ng-template>
