<mat-card class="bank-holidays-header">
  <mat-card-title>{{ year }} - Bank Holidays </mat-card-title>
</mat-card>
<vm-year-picker
  [year]="year"
  (yearChange)="handleYearChangeClick($event)"
></vm-year-picker>

<div class="wrapper">
  <div class="add-dates-container">
    <mat-form-field class="mat-form-picker">
      <input
        matInput
        ([fromControl])="(selectedDate)"
        [matDatepicker]="picker"
        placeholder="Choose a date"
      />
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Description</mat-label>
      <input matInput placeholder="" />
    </mat-form-field>
    <button
      mat-button
      class="add-button"
      (click)="addBankHoliday(selectedDate, name)"
    >
      <mat-icon>add</mat-icon>
    </button>
  </div>
  <table mat-table [dataSource]="bankHolidays">
    <ng-container matColumnDef="dates">
      <th mat-header-cell *matHeaderCellDef>Dates</th>
      <td mat-cell *matCellDef="let element">
        {{ element.date.format('DD MMMM YYYY') }}
      </td>
    </ng-container>
    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>Description</th>
      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
    </ng-container>
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef>Action</th>
      <td mat-cell *matCellDef="let element">
        <button mat-button>Delete</button>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

  <button mat-button class="save">Save</button>
</div>