<div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
  <ds-truncatable [id]="dso.id">
    <ng-content></ng-content>
    <a *ngIf="linkType != linkTypes.None"
       [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
       rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
       class="card-img-top full-width">
      <div>
        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
        </ds-grid-thumbnail>
      </div>
    </a>
    <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
      <div>
        <ds-grid-thumbnail [thumbnail]="getThumbnail() | async">
        </ds-grid-thumbnail>
      </div>
    </span>
    <div class="card-body">
      <ds-item-type-badge [object]="dso"></ds-item-type-badge>
      <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
        <h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4>
      </ds-truncatable-part>
      <p *ngIf="dso.hasMetadata('dc.description')" class="item-description card-text text-muted">
        <ds-truncatable-part [id]="dso.id" [minLines]="3">
          <span [innerHTML]="firstMetadataValue('dc.description')"></span>
        </ds-truncatable-part>
      </p>
      <div *ngIf="linkType != linkTypes.None" class="text-center">
        <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
           rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
           class="lead btn btn-primary viewButton">View</a>
      </div>
    </div>
  </ds-truncatable>
  <ng-content></ng-content>
</div>