<div class="app-screenshot" style="width: 300px">
  <h2>Date pipe</h2>
  <div class="sky-form-group">
    <label class="sky-control-label" for="datepicker">
      Choose or type in a date
    </label>
    <sky-datepicker>
      <input
        class="sky-form-control"
        id="datepicker"
        skyDatepickerInput
        type="text"
        [(ngModel)]="myDate"
      />
    </sky-datepicker>
  </div>

  <div class="sky-form-group">
    <label class="sky-control-label" for="format"> Format </label>
    <select
      class="sky-form-control"
      id="format"
      name="format"
      [(ngModel)]="format"
    >
      @for (formatItem of formatList; track formatItem) {
        <option>
          {{ formatItem }}
        </option>
      }
    </select>
    <span class="sky-deemphasized">
      Angular's predefined 'short' format is default. Choose a format above to
      override.
    </span>
  </div>

  <div class="sky-form-group">
    <label class="sky-control-label" for="locale"> Locale </label>
    <select
      class="sky-form-control"
      id="locale"
      name="locale"
      [(ngModel)]="locale"
    >
      @for (localeItem of localeList; track localeItem) {
        <option>
          {{ localeItem }}
        </option>
      }
    </select>
    <span class="sky-deemphasized">
      Default locale based on browser's settings. Choose a locale above to
      override.
    </span>
  </div>

  <div class="sky-form-group">
    <p>
      <button
        class="sky-btn sky-btn-primary"
        type="button"
        (click)="onResetClick()"
      >
        Reset to default
      </button>
    </p>
  </div>
</div>

<hr />

<div class="app-screenshot">
  <h3>Pipe output →</h3>

  <p class="sky-font-emphasized">
    {{ myDate | skyDate: format : locale }}
  </p>

  <p class="sky-field-label">
    Date model: <code>{{ dateForDisplay() }}</code>
  </p>
</div>
