<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 | assetPreview: 'thumb'" />
        </div>
        <div class="detail">
            <vdr-entity-info
                [entity]="asset"
                [small]="true"
                (click)="entityInfoClick($event)"
            ></vdr-entity-info>
            <span [title]="asset.name">{{ asset.name }}</span>
        </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>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>
            <ng-container *ngIf="selection.length === 1">
                <div>
                    <button (click)="previewAsset(lastSelected())" class="btn btn-link">
                        <clr-icon shape="eye"></clr-icon> {{ 'asset.preview' | translate }}
                    </button>
                </div>
                <div>
                    <a [routerLink]="['./', lastSelected().id]" class="btn btn-link">
                        <clr-icon shape="pencil"></clr-icon> {{ 'common.edit' | translate }}
                    </a>
                </div>
            </ng-container>
            <div *ngIf="canDelete">
                <button (click)="deleteAssets.emit(selection)" class="btn btn-link">
                    <clr-icon shape="trash" class="is-danger"></clr-icon> {{ 'common.delete' | translate }}
                </button>
            </div>
        </div>
    </div>
    <div class="card stack" [class.visible]="selection.length > 1"></div>
    <div class="selection-count" [class.visible]="selection.length > 1">
        {{ 'asset.assets-selected-count' | translate: { count: selection.length } }}
        <ul>
            <li *ngFor="let asset of selection">{{ asset.name }}</li>
        </ul>
    </div>
</div>
