<div class="gallery">
    <div
        class="card"
        *ngFor="let asset of assets"
        (click)="toggleSelection($event, asset)"
        [class.selected]="isSelected(asset)"
    >
        <div class="card-img">
            <div class="selected-checkbox"><clr-icon shape="check-circle" size="32"></clr-icon></div>
            <img [src]="asset.preview + '?preset=thumb'" />
        </div>
        <div class="detail">{{ asset.name }}</div>
    </div>
</div>
<div class="info-bar">
    <div class="card">
        <div class="card-img">
            <div class="placeholder" *ngIf="selection.length === 0">
                <clr-icon shape="image" size="128"></clr-icon>
                <div>{{ 'catalog.no-selection' | translate }}</div>
            </div>
            <img
                class="preview"
                *ngIf="selection.length >= 1"
                [src]="lastSelected().preview + '?preset=medium'"
            />
        </div>
        <div class="card-block details" *ngIf="selection.length >= 1">
            <div class="name">{{ lastSelected().name }}</div>
            <div>
                {{ 'catalog.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}
            </div>
            <div>
                <a [href]="lastSelected().source" target="_blank">
                    {{ 'catalog.open-asset-source' | translate }}
                </a>
            </div>
        </div>
    </div>
    <div class="card stack" [class.visible]="selection.length > 1"></div>
    <div class="selection-count" [class.visible]="selection.length > 1">
        <clr-tooltip>
            <div clrTooltipTrigger class="trigger">
                {{ 'catalog.assets-selected-count' | translate: { count: selection.length } }}
            </div>
            <clr-tooltip-content clrPosition="top-left" clrSize="lg" *clrIfOpen>
                <ul>
                    <li *ngFor="let asset of selection">{{ asset.name }}</li>
                </ul>
            </clr-tooltip-content>
        </clr-tooltip>
    </div>
</div>
