<div class="main-container" *ngIf="charts">
  <div class="mat-h2">Veřejné grafy</div>
  <div class="card-wrapper" *ngFor="let chart of charts">
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          <div class="detail-link" routerLink="/charts/{{ chart.id }}">{{ chart.title }}</div>
          <div class="buttons">
            <button mat-icon-button *ngIf="userId && userId !== chart.authorId" (click)="onPinChart(chart.id);" class="add-to-private-button" matTooltip="Přidat mezi privátní grafy" matTooltipPosition="above">
                <mat-icon color="accent">add_circle</mat-icon>
            </button>
          </div>
        </mat-card-title>
        <mat-card-subtitle>{{ chart.fromDate }} - {{ chart.toDate }}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <app-chart [chart]="chart"></app-chart>
      </mat-card-content>
    </mat-card>
  </div>
</div>