<h1 mat-dialog-title>Create New Task</h1>
<div mat-dialog-content>
  <mat-form-field appearance="outline" class="long-form">
    <mat-label>Name</mat-label>
    <input matInput [formControl]="nameCtrl">
    <mat-hint align="end">{{nameCtrl.value.length}} / 255</mat-hint>
  </mat-form-field>
  <mat-form-field appearance="outline" class="long-form">
    <mat-label>ETA</mat-label>
    <input matInput type="number" [formControl]="etaCtrl" min="0">
  </mat-form-field>
  <mat-form-field class="date-form">
    <mat-label>Startdate</mat-label>
    <input matInput [matDatepicker]="startpicker" [formControl]="startDate">
    <mat-hint>MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="startpicker"></mat-datepicker-toggle>
    <mat-datepicker #startpicker></mat-datepicker>
  </mat-form-field>
  <mat-form-field class="date-form">
    <mat-label>Deadline</mat-label>
    <input matInput [matDatepicker]="deadlinepicker" [formControl]="endDate">
    <mat-hint>MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="deadlinepicker"></mat-datepicker-toggle>
    <mat-datepicker #deadlinepicker></mat-datepicker>
  </mat-form-field>
</div>

<div mat-dialog-actions align="end">
  <button mat-raised-button (click)="cancel()">Cancel</button>
  <button mat-raised-button (click)="submit()">Add Task</button>
</div>