<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<!-- Basic with calendar -->
<div class="{{@root.prefix}}--form-item">
  <div data-date-picker data-date-picker-type="single"
    class="{{@root.prefix}}--date-picker {{@root.prefix}}--date-picker--single {{@root.prefix}}--date-picker--nolabel">
    <div class="{{@root.prefix}}--date-picker-container">
      <div class="{{@root.prefix}}--date-picker-input__wrapper">
        <input type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input"
          pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
        {{ carbon-icon 'Calendar16' class=(add @root.prefix '--date-picker__icon') data-date-picker-icon="true" }}
      </div>
    </div>
  </div>
</div>

<!-- Basic with calendar -->
<div class="{{@root.prefix}}--form-item">
  <div data-date-picker data-date-picker-type="single"
    class="{{@root.prefix}}--date-picker {{@root.prefix}}--date-picker--single {{@root.prefix}}--date-picker--nolabel">
    <div class="{{@root.prefix}}--date-picker-container">
      <div class="{{@root.prefix}}--date-picker-input__wrapper">
        <input data-invalid type="text" id="date-picker-3" class="{{@root.prefix}}--date-picker__input"
          pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy" data-date-picker-input />
        {{ carbon-icon 'Calendar16' class=(add @root.prefix '--date-picker__icon') data-date-picker-icon="true" }}
      </div>
      <div class="{{@root.prefix}}--form-requirement">
        Invalid date format.
      </div>
    </div>
  </div>
</div>
