<mat-card>
  <mat-card-content>
    <img class="pokemon-img" [src]="pokemon?.image" />

    <h1 class="name">{{ pokemon?.name }}</h1>

    <mat-chip-list>
      <mat-chip color="primary" *ngFor="let type of pokemon?.types">{{ type }}</mat-chip>
    </mat-chip-list>

    <div class="mat-table">
      <div class="mat-header-row">
        <div class="mat-header-cell">Name</div>
        <div class="mat-header-cell level-header">Level learned at</div>
      </div>
      <div class="mat-row" *ngFor="let move of pokemon?.moves">
        <div class="mat-cell move-name">{{ move?.name }}</div>
        <div class="mat-cell move-level">{{ move?.levelLearnedAt }}</div>
      </div>
    </div>
  </mat-card-content>
</mat-card>