<div class="card card-stats">
  <div class="card-header card-header-default card-header-icon" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()">
    <div *ngIf="routerLink" class="card-icon">
      <i class="material-icons-outlined">{{ icon }}</i>
    </div>
    <div *ngIf="!routerLink" class="card-icon card-icon-nocursor">
      <i class="material-icons-outlined">{{ icon }}</i>
    </div>
    <p class="card-category">{{ title | translate }}</p>
    <h3 class="card-title">
      <b>{{ subtitle }}</b>
    </h3>
  </div>
  <div class="card-footer">
    <div class="stats">
      <a *ngIf="routerLink" class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="[routerLink]">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
      <a *ngIf="!routerLink" class="view-all-hidden" [class.clickable]="isAuthenticated()">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
    </div>
  </div>
</div>
