<div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
  <ds-truncatable [id]="dso.id">
    <div class="position-absolute ml-1">
      <ng-content></ng-content>
    </div>
    <a *ngIf="linkType != linkTypes.None"
       [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
       [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
      <div>
        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
        </ds-themed-thumbnail>
      </div>
    </a>
    <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
            <div>
                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
                </ds-themed-thumbnail>
            </div>
        </span>
    <div class="card-body">
      <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
      <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
        <h4 class="card-title" [innerHTML]="dsoTitle"></h4>
      </ds-truncatable-part>
      <p *ngIf="dso.hasMetadata('person.email')" class="item-email card-text text-muted">
        <ds-truncatable-part [id]="dso.id" [minLines]="1">
          <span [innerHTML]="firstMetadataValue('person.email')"></span>
        </ds-truncatable-part>
      </p>
      <p *ngIf="dso.hasMetadata('person.jobTitle')" class="item-jobtitle card-text">
        <ds-truncatable-part [id]="dso.id" [minLines]="3">
          <span [innerHTML]="firstMetadataValue('person.jobTitle')"></span>
        </ds-truncatable-part>
      </p>
      <div *ngIf="linkType != linkTypes.None" class="text-center">
        <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
           [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
      </div>
    </div>
  </ds-truncatable>
  <ng-content></ng-content>
</div>
