<div class="project-card">
  <div class="project-card__image">
    <img class="project-avatar" src="{{ imageUrl }}" alt="">
    <div class="avatar-socials">
      <a *ngIf="project.facebook" href="{{ project.facebook}}" target="_blank" class="social-icon social-icon__facebook"></a>
      <a *ngIf="project.telegram" href="{{ project.telegram}}" target="_blank" class="social-icon social-icon__telegram"></a>
      <a *ngIf="project.twitter" href="{{ project.twitter}}" target="_blank" class="social-icon social-icon__twitter"></a>
    </div>
  </div>
  <div class="project-card__info">
    <div class="project-card__info-wrapper">
      <ul class="title-list">
        <li>{{ 'ProjectCard.ProjectArea' | translate }}</li>
        <li>{{ 'ProjectCard.Country' | translate }}</li>
        <li>{{ 'ProjectCard.Status' | translate }}</li>
        <li>{{ 'ProjectCard.IcoDate' | translate }}</li>
        <li>{{ 'ProjectCard.Website' | translate }}</li>
      </ul>
      <ul class="values-list">
        <li>{{ category }}</li>
        <li>{{ country }}</li>
        <li>{{ stage }}</li>
        <li>{{ project.icoDate | formatDate | dashIfEmpty }}</li>
        <li>
          <a *ngIf="project.website" href="{{ project.website }}" target="_blank">{{ project.website }}</a>
          <span *ngIf="!project.website">&mdash;</span>
        </li>
      </ul>
    </div>
    <a *ngIf="project.whitePaperLink" href="{{ project.whitePaperLink}}" class="ghost-btn small" target="_blank">
      {{ 'ProjectCard.OpenWP' | translate }}
    </a>
  </div>
  <div class="project-card__controls">
    <ng-content></ng-content>
  </div>
</div>
