<div class="card" *ngIf="!compact; else compactView">
    <div class="card-img">
        <div class="featured-asset">
            <img
                *ngIf="featuredAsset"
                [src]="featuredAsset!.preview + '?preset=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">
        <button class="btn" (click)="selectAssets()">
            <clr-icon shape="attachment"></clr-icon>
            {{ 'catalog.add-asset' | translate }}
        </button>
    </div>
</div>

<ng-template #compactView>
    <div class="featured-asset compact">
        <img
            *ngIf="featuredAsset"
            [src]="featuredAsset!.preview + '?preset=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
        class="compact-select btn btn-icon btn-sm btn-block"
        [title]="'catalog.add-asset' | translate"
        (click)="selectAssets()"
    >
        <clr-icon shape="attachment"></clr-icon>
        {{ 'catalog.add-asset' | translate }}
    </button>
</ng-template>

<ng-template #assetList>
    <div class="all-assets" [class.compact]="compact">
        <ng-container *ngFor="let asset of assets">
            <vdr-dropdown>
                <div
                    class="asset-thumb"
                    vdrDropdownTrigger
                    [class.featured]="isFeatured(asset)"
                    [title]=""
                    tabindex="0"
                >
                    <img [src]="asset.preview + '?preset=tiny'" />
                </div>
                <vdr-dropdown-menu vdrPosition="bottom-right">
                    <button type="button" vdrDropdownItem (click)="previewAsset(asset)">
                        {{ 'catalog.preview' | translate }}
                    </button>
                    <button
                        type="button"
                        [disabled]="isFeatured(asset)"
                        vdrDropdownItem
                        (click)="setAsFeatured(asset)"
                    >
                        {{ 'catalog.set-as-featured-asset' | translate }}
                    </button>
                    <div class="dropdown-divider"></div>
                    <button type="button" class="remove-asset" vdrDropdownItem (click)="removeAsset(asset)">
                        {{ 'catalog.remove-asset' | translate }}
                    </button>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </ng-container>
    </div>
</ng-template>
