<a *ngIf="directLink && stakeholder" [href]="getStakeholderPageUrl()" target="_blank"
   class="uk-height-1-1 uk-link-reset uk-display-block" [class.uk-disabled]="!hasPermission()">
  <ng-container [ngTemplateOutlet]="card"></ng-container>
</a>
<a *ngIf="!directLink && stakeholder" (click)="confirmModalOpen()"
   class="uk-height-1-1 uk-link-reset uk-display-block" [class.uk-disabled]="!hasPermission()">
  <ng-container [ngTemplateOutlet]="card"></ng-container>
</a>
<ng-template #card>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body" [ngClass]="stakeholder.type" [class.uk-disabled]="!hasPermission()">
    <div *ngIf="stakeholder.visibility && stakeholder.visibility !== 'PUBLIC'"
         class="uk-position-top-right uk-margin-small-top uk-margin-small-right uk-flex uk-flex-column uk-flex-middle uk-position-z-index">
      <icon [name]="visibilityIcon.get(stakeholder.visibility)" ratio="1.2" [flex]="true"></icon>
      <span class="uk-text-small uk-text-capitalize">{{stakeholder.visibility.toLowerCase()}}</span>
    </div>
    <div class="uk-card-media-top uk-padding-large uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
      <img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl" [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply">
			<ng-template #elseBlock>
				<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply">
			</ng-template>
    </div>
    <div class="uk-card-body uk-padding-remove-horizontal">
      <div class="uk-text-capitalize uk-text-small type">{{mapType(stakeholder.type)}}</div>
      <div class="uk-h6 uk-margin-remove multi-line-ellipsis lines-2">
        <p *ngIf="stakeholder.name" class="uk-margin-remove">
          {{stakeholder.name}}
        </p>
      </div>
    </div>
  </div>
</ng-template>
<modal-alert #AlertModal [overflowBody]="false" (alertOutput)="goToPage($event)"></modal-alert>
