<div class="card" *ngIf="!compact; else compactView">
    <div class="card-img">
        <div class="featured-asset">
            <img
                *ngIf="featuredAsset"
                [src]="featuredAsset | assetPreview:'small'"
                (click)="previewAsset(featuredAsset)"
            />
            <div class="placeholder" *ngIf="!featuredAsset">
                <clr-icon shape="image" size="128"></clr-icon>
                <div>{{ 'catalog.no-featured-asset' | translate }}</div>
            </div>
        </div>
    </div>
    <div class="card-block"><ng-container *ngTemplateOutlet="assetList"></ng-container></div>
    <div class="card-footer" *vdrIfPermissions="'UpdateCatalog'">
        <button class="btn" (click)="selectAssets()">
            <clr-icon shape="attachment"></clr-icon>
            {{ 'asset.add-asset' | translate }}
        </button>
    </div>
</div>

<ng-template #compactView>
    <div class="featured-asset compact">
        <img
            *ngIf="featuredAsset"
            [src]="featuredAsset | assetPreview:'thumb'"
            (click)="previewAsset(featuredAsset)"
        />

        <div class="placeholder" *ngIf="!featuredAsset"><clr-icon shape="image" size="150"></clr-icon></div>
    </div>
    <ng-container *ngTemplateOutlet="assetList"></ng-container>
    <button
        *vdrIfPermissions="'UpdateCatalog'"
        class="compact-select btn btn-icon btn-sm btn-block"
        [title]="'asset.add-asset' | translate"
        (click)="selectAssets()"
    >
        <clr-icon shape="attachment"></clr-icon>
        {{ 'asset.add-asset' | translate }}
    </button>
</ng-template>

<ng-template #assetList>
    <div class="all-assets" [class.compact]="compact" cdkDropListGroup #dlg>
        <div
            cdkDropList
            #dl
            [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
            [cdkDropListEnterPredicate]="dropListEnterPredicate"
            (cdkDropListDropped)="dropListDropped()"
        ></div>
        <div
            *ngFor="let asset of assets"
            cdkDropList
            [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
            [cdkDropListEnterPredicate]="dropListEnterPredicate"
            (cdkDropListDropped)="dropListDropped()"
        >
            <vdr-dropdown cdkDrag (cdkDragMoved)="dragMoved($event)">
                <div
                    class="asset-thumb"
                    vdrDropdownTrigger
                    [class.featured]="isFeatured(asset)"
                    [title]=""
                    tabindex="0"
                >
                    <img [src]="asset | assetPreview:'tiny'" />
                </div>
                <vdr-dropdown-menu vdrPosition="bottom-right">
                    <button type="button" vdrDropdownItem (click)="previewAsset(asset)">
                        {{ 'asset.preview' | translate }}
                    </button>
                    <button
                        type="button"
                        [disabled]="isFeatured(asset) || !('UpdateCatalog' | hasPermission)"
                        vdrDropdownItem
                        (click)="setAsFeatured(asset)"
                    >
                        {{ 'asset.set-as-featured-asset' | translate }}
                    </button>
                    <div class="dropdown-divider"></div>
                    <button
                        type="button"
                        class="remove-asset"
                        vdrDropdownItem
                        [disabled]="!('UpdateCatalog' | hasPermission)"
                        (click)="removeAsset(asset)"
                    >
                        {{ 'asset.remove-asset' | translate }}
                    </button>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </div>
    </div>
</ng-template>
