<div class="content">
  <div class="default-header">
    <div class="row">
      <h1 class="col">Snapshots</h1>
    </div>
  </div>
  <div class="default-content">
    <mat-card>
      <mat-form-field class="filter-field">
        <input matInput [(ngModel)]="searchText" placeholder="Filter" />
      </mat-form-field>

      <mat-table
        class="mat-table"
        #table
        matSort
        (matSortChange)="sortData($event)"
        [dataSource]="snapshots | namefilter: searchText"
      >
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.name }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="creationDate">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{ row.created_at | datefilter }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
          <mat-cell *matCellDef="let row" style="text-align: right">
            <button
              mat-icon-button
              matTooltip="Restore snapshot"
              matTooltipClass="custom-tooltip"
              (click)="restoreSnapshot(row)"
            >
              <mat-icon aria-label="Restore snapshot">restore</mat-icon>
            </button>

            <button
              mat-icon-button
              matTooltip="Delete snapshot"
              matTooltipClass="custom-tooltip"
              (click)="deleteSnapshot(row)"
            >
              <mat-icon aria-label="Delete snapshot">delete</mat-icon>
            </button>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
    </mat-card>
  </div>
</div>
