<div class="container">
  <h1>{{ 'ALGORITHM.TITLE' |translate }}</h1>
  <div class="category-cards">
@for (category of categories$ | async; track category.id) {
    <mat-card [routerLink]="[category.routerLink]">
      <mat-card-header>
        <mat-card-title>{{ category.title | translate }}</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <p>{{ category.description | translate}}</p>
      </mat-card-content>
    </mat-card>
  }
  </div>
</div>
