<div class="main-container" *ngIf="charts && charts.addedCharts.length > 0">
  <div class="mat-h2 added-heading">Připnuté veřejné grafy</div>
  <div class="card-wrapper" *ngFor="let chart of charts.addedCharts">
    <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 (click)="onUnpinClick(chart.id);" class="disconnect-chart-button" matTooltip="Odepnout veřejný graf z privátních grafů" matTooltipPosition="below">
                <mat-icon color="accent">remove_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>
<div class="main-container">
  <div class="heading">
    <div class="mat-h2">
      Vlastní grafy
    </div>
    <button align="end" mat-button mat-raised-button color="accent" routerLink="/charts/new">Vytvořit graf</button>
  </div>
  <ng-template [ngIf]="charts && charts.usersCharts.length > 0">
    <div class="card-wrapper" *ngFor="let chart of charts.usersCharts">
      <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 (click)="onDeleteClick(chart.id);" matTooltip="Odstranit graf" matTooltipPosition="below">
                  <mat-icon color="accent">delete</mat-icon>
              </button>
              <button mat-icon-button routerLink="/charts/{{ chart.id }}/edit" matTooltip="Upravit graf" matTooltipPosition="above">
                  <mat-icon color="accent">edit</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>
  </ng-template>
</div>