<sky-input-box>
  <label class="sky-control-label" [for]="dateFormatInput.id"
    >Date format</label
  >
  <input
    #dateFormatInput="skyId"
    class="sky-form-control"
    skyId
    [(ngModel)]="dateFormat"
  />
</sky-input-box>

<div
  class="app-screenshot"
  id="screenshot-datepicker-calendar"
  style="display: inline-block"
>
  <sky-datepicker-calendar
    #datepicker
    [selectedDate]="selectedDate"
    (selectedDateChange)="selectedDate = $event"
  />
</div>
<br />
<div
  class="app-screenshot"
  id="screenshot-datepicker"
  style="max-width: 50%; height: 500px"
>
  <sky-input-box labelText="Easy mode input box" stacked="true">
    <sky-datepicker #picker>
      <input
        #date="ngModel"
        skyDatepickerInput
        [disabled]="disabled"
        [maxDate]="maxDate"
        [minDate]="minDate"
        [startAtDate]="startAtDate"
        [skyDatepickerNoValidate]="noValidate"
        [startingDay]="startingDay"
        [strict]="strict"
        [dateFormat]="dateFormat"
        [(ngModel)]="selectedDate"
      />
    </sky-datepicker>
  </sky-input-box>

  <table>
    <tr>
      <th>Touched</th>
      <td>{{ date.touched }}</td>
    </tr>
    <tr>
      <th>Pristine</th>
      <td>{{ date.pristine }}</td>
    </tr>
    <tr>
      <th>Valid</th>
      <td>{{ date.valid }}</td>
    </tr>
    <tr>
      <th>Dirty</th>
      <td>{{ date.dirty }}</td>
    </tr>
  </table>

  @if (date.errors && date.errors.skyDate) {
    <p class="sky-error-label">
      @if (date.errors.skyDate.invalid) {
        <span> Please enter a valid date. </span>
      }

      @if (date.errors.skyDate.minDate) {
        <span> Date is prior to minimum date range. </span>
      }

      @if (date.errors.skyDate.maxDate) {
        <span> Date is after maximum date range. </span>
      }
    </p>
  }

  <p>
    Model value: <code>{{ selectedDate }}</code>
  </p>
</div>

<div class="app-screenshot" style="max-width: 50%; height: 500px">
  <p>Fuzzy datepicker template form</p>
  <sky-datepicker>
    <input
      #date="ngModel"
      skyFuzzyDatepickerInput
      [futureDisabled]="futureDisabled"
      [disabled]="disabled"
      [maxDate]="fuzzyMaxDate"
      [minDate]="fuzzyMinDate"
      [startAtDate]="fuzzyStartAtDate"
      [skyDatepickerNoValidate]="noValidate"
      [startingDay]="startingDay"
      [dateFormat]="dateFormat"
      [(ngModel)]="selectedDate"
    />
  </sky-datepicker>
</div>

<div class="app-screenshot" style="max-width: 50%; height: 500px">
  <p>Reactive form</p>
  <form novalidate [formGroup]="reactiveForm">
    <sky-datepicker>
      <input
        formControlName="selectedDate"
        skyDatepickerInput
        type="text"
        [maxDate]="maxDate"
        [minDate]="minDate"
        [startAtDate]="startAtDate"
        [dateFormat]="dateFormat"
        [skyDatepickerNoValidate]="noValidate"
        [startingDay]="startingDay"
      />
    </sky-datepicker>

    <table>
      <tr>
        <th>Touched</th>
        <td>{{ reactiveDate.touched }}</td>
      </tr>
      <tr>
        <th>Pristine</th>
        <td>{{ reactiveDate.pristine }}</td>
      </tr>
      <tr>
        <th>Valid</th>
        <td>{{ reactiveDate.valid }}</td>
      </tr>
      <tr>
        <th>Dirty</th>
        <td>{{ reactiveDate.dirty }}</td>
      </tr>
    </table>

    @if (reactiveDate.errors) {
      <p class="sky-error-label">
        @if (reactiveDate.errors.skyDate?.invalid) {
          <span> Please enter a valid date. </span>
        }

        @if (reactiveDate.errors.skyDate?.minDate) {
          <span> Date is prior to minimum date range. </span>
        }

        @if (reactiveDate.errors.skyDate?.maxDate) {
          <span> Date is after maximum date range. </span>
        }
      </p>
    }

    <p>
      Model value: <code>{{ reactiveForm.value.selectedDate }}</code>
    </p>
  </form>
</div>
<button
  class="sky-btn sky-btn-primary"
  type="button"
  (click)="setReactiveString(false)"
>
  Set string value with emitEvent: false
</button>
<button
  class="sky-btn sky-btn-primary"
  type="button"
  (click)="setReactiveString()"
>
  Set string value with emitEvent: true
</button>
<button
  class="sky-btn sky-btn-primary"
  type="button"
  (click)="setReactiveDate(false)"
>
  Set date value with emitEvent: false
</button>
<button
  class="sky-btn sky-btn-primary"
  type="button"
  (click)="setReactiveDate()"
>
  Set date value with emitEvent: true
</button>
<button
  class="sky-btn sky-btn-primary"
  type="button"
  (click)="setMinMaxStartAtDates()"
>
  Set min, max, and startAt dates
</button>
<button
  class="sky-btn sky-btn-primary"
  type="button"
  (click)="setFuzzyMinMaxStartAtDates()"
>
  Set fuzzy min, max, and startAt dates
</button>
<button
  class="sky-btn sky-btn-primary"
  type="button"
  (click)="toggleFutureDisabled()"
>
  Toggle fuzzy future disabled
</button>
<button
  class="sky-btn sky-btn-primary"
  type="button"
  (click)="setStartingDay()"
>
  Set starting day to Monday
</button>
<button
  class="sky-btn sky-btn-primary"
  id="toggle-disabled-btn"
  type="button"
  (click)="toggleDisabled()"
>
  Toggle disabled
</button>
<button class="sky-btn sky-btn-primary" type="button" (click)="setValue()">
  Set new value
</button>
<button
  class="sky-btn sky-btn-primary"
  id="button-set-invalid-value"
  type="button"
  (click)="setInvalidValue()"
>
  Set invalid value
</button>
<button
  class="sky-btn sky-btn-primary"
  id="button-set-invalid-value"
  type="button"
  (click)="strict = !strict"
>
  Toggle strict formatting
</button>
<button
  class="sky-btn sky-btn-primary"
  id="button-set-custom-dates"
  type="button"
  (click)="onToggleCustomDatesClick()"
>
  Toggle custom dates
</button>

<div
  class="app-screenshot"
  id="screenshot-datepicker-input-box"
  style="max-width: 50%; height: 500px"
>
  <sky-input-box
    hintText="Here's some hint text."
    labelText="Input box"
    [disabled]="disabled"
  >
    <sky-datepicker
      #inputBoxPicker
      (calendarDateRangeChange)="onCalendarDateRangeChange($event)"
    >
      <input
        #date="ngModel"
        skyDatepickerInput
        [disabled]="disabled"
        [maxDate]="maxDate"
        [minDate]="minDate"
        [skyDatepickerNoValidate]="noValidate"
        [dateFormat]="dateFormat"
        [startingDay]="startingDay"
        [strict]="strict"
        [(ngModel)]="selectedDate"
      />
    </sky-datepicker>
  </sky-input-box>
</div>
