<div class="card" *ngIf="!compact; else: compactView">
    <div class="card-img">
        <div class="featured-asset">
            <img *ngIf="featuredAsset" [src]="featuredAsset!.preview + '?preset=small'" />
            <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">
        <clr-dropdown *ngIf="featuredAsset">
            <img clrDropdownTrigger [src]="featuredAsset!.preview + '?preset=tiny'" />
            <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
                <button
                    type="button"
                    class="remove-asset"
                    clrDropdownItem
                    (click)="removeAsset(featuredAsset)"
                >
                    {{ 'catalog.remove-asset' | translate }}
                </button>
            </clr-dropdown-menu>
        </clr-dropdown>

        <div class="placeholder" *ngIf="!featuredAsset"><clr-icon shape="image" size="48"></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>
    </button>
</ng-template>

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