<ng-container *ngVar="object.indexableObject as item">
    <ds-truncatable [id]="item.id">
        <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
            <a [routerLink]="['/items/' + item.id]" class="card-img-top full-width">
                <div>
                    <ds-grid-thumbnail [thumbnail]="item.getThumbnail() | async">
                    </ds-grid-thumbnail>
                </div>
            </a>
            <div class="card-body">
                <ds-item-type-badge [object]="object"></ds-item-type-badge>
                <ds-truncatable-part [id]="item.id" [minLines]="3" type="h4">
                    <h4 class="card-title" [innerHTML]="item.firstMetadataValue('dc.title')"></h4>
                </ds-truncatable-part>
                <p *ngIf="item.hasMetadata('creativework.datePublished')" class="item-date card-text text-muted">
                    <ds-truncatable-part [id]="item.id" [minLines]="1">
                        <span [innerHTML]="firstMetadataValue('creativework.datePublished')"></span>
                    </ds-truncatable-part>
                </p>
                <p *ngIf="item.hasMetadata('journal.title')" class="item-journal-title card-text">
                    <ds-truncatable-part [id]="item.id" [minLines]="3">
                        <span [innerHTML]="firstMetadataValue('journal.title')"></span>
                    </ds-truncatable-part>
                </p>
                <div class="text-center">
                    <a [routerLink]="['/items/' + item.id]"
                       class="lead btn btn-primary viewButton">View</a>
                </div>
            </div>
        </div>
    </ds-truncatable>
</ng-container>