<div class="main-container" *ngIf="chart">
  <div class="mat-h2">Detail grafu</div>
  <div class="card-wrapper" #cardWrapper>
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          <div>{{ chart.title }}</div>
          <div class="buttons" [hidden]="exportInProgress">
            <button mat-icon-button *ngIf="pinnable && 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>
            <button mat-icon-button *ngIf="unpinnable && userId && userId !== chart.authorId" (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>
            <button mat-icon-button *ngIf="userId === chart.authorId" (click)="onDeleteClick(chart.id);" matTooltip="Odstranit graf" matTooltipPosition="below">
                <mat-icon color="accent">delete</mat-icon>
            </button>
            <button mat-icon-button *ngIf="userId === chart.authorId" routerLink="/charts/{{ chart.id }}/edit" matTooltip="Upravit graf" matTooltipPosition="above">
                <mat-icon color="accent">edit</mat-icon>
            </button>
            <button mat-icon-button (click)="onExportClick(cardWrapper);" matTooltip="Exportovat graf" matTooltipPosition="below">
                <mat-icon color="accent">get_app</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>