<div class="dialog-help-wrapper">
  <h1 mat-dialog-title>{{ T.F.TASK.D_TIME_FOR_DAY.TITLE | translate }}</h1>

  <form
    (submit)="$event.preventDefault(); submit()"
    name="addForAnotherDayForm"
  >
    <mat-dialog-content>
      <help-section>
        <div
          [innerHTML]="T.F.TASK.D_TIME_FOR_DAY.HELP | translate"
          class="side-info"
        ></div>
      </help-section>

      <h3 class="mat-caption">
        {{
          T.F.TASK.D_TIME_FOR_DAY.ADD_ENTRY_FOR
            | translate
              : {
                  date: newEntry.date
                    ? (newEntry.date
                      | localeDate
                        : dateTimeFormatService.dateFormat().raw
                        : undefined
                        : locale())
                    : dateTimeFormatService.dateFormat().humanReadable,
                }
        }}
      </h3>

      <date-picker-input
        [(ngModel)]="newEntry.date"
        [ngModelOptions]="{ standalone: true }"
        [label]="T.F.TASK.D_TIME_FOR_DAY.DATE | translate"
        [required]="true"
      />

      <div class="wrap-time">
        <input-duration-slider
          [(model)]="newEntry.timeSpent"
          [label]="T.F.TASK.D_TIME_FOR_DAY.TINE_SPENT | translate"
        >
        </input-duration-slider>
      </div>
    </mat-dialog-content>

    <mat-dialog-actions align="end">
      <button
        [mat-dialog-close]="true"
        mat-button
        type="button"
      >
        {{ T.G.CANCEL | translate }}
      </button>

      <button
        color="primary"
        mat-flat-button
        type="submit"
        [disabled]="!newEntry.timeSpent || !newEntry.date"
      >
        <mat-icon>save</mat-icon>
        {{ T.G.SAVE | translate }}
      </button>
    </mat-dialog-actions>
  </form>
</div>
