<% include ../partials/header %>
<section>
  <header>
    <h1>PRESS Test Site</h1>
    <h2>Autocomplete</h2>
  </header>

  <main class="">
    <h3>Code Under Test</h3>
    <form class="ui form" id="autocomplete-section">
      <press-autocomplete class="field required" required name="autocomplete">
        <press-noscript>
          <input name="autocomplete" required>
        </press-noscript>
      </press-autocomplete>
      <button type="submit">autocomplete</button>
    </form>

    <form class="ui form" id="autocomplete-section-with-errors">
      <div class="field error">
        <press-autocomplete class="field required error" press-validation-error="'autocomplete' is required" name="autocomplete" required>
          <press-noscript>
            <input name="autocomplete" required>
            <div class="ui error input">
              'autocomplete' is required
            </div>
          </press-noscript>
        </press-autocomplete>
      </div>
      <button type="submit">autocomplete with errors</button>
    </form>

    <form class="ui form" id="datepicker-section">
      <div class="field">
        <press-datepicker class="field required" name="datepicker" required>
          <press-noscript>
            <input name="datepicker" required type="date">
          </press-noscript>
        </press-datepicker>
      </div>
      <button type="submit">datepicker</button>
    </form>

    <form class="ui form" id="datepicker-section-with-errors">
      <div class="field error">
        <press-datepicker class="field required error" name="datepicker" press-validation-error="'datepicker' is required" required>
          <press-noscript>
            <input name="datepicker" required type="date">
            <div class="ui error input">
              'datepicker' is required
            </div>
          </press-noscript>
        </press-datepicker>
      </div>
      <button type="submit">datepicker with errors</button>
    </form>

    <form class="ui form" id="daterangepicker-section">
      <press-daterangepicker class="field required" name="daterangepicker" press-start-key="start_date" press-end-key="end_date" required>
        <press-noscript>
          <input name="daterangepicker[start_date]" required type="date">
          <input name="daterangepicker[end_date]" required type="date">
        </press-noscript>
      </press-daterangepicker>
      <button type="submit">daterangepicker</button>
    </form>

    <form class="ui form" id="daterangepicker-section-with-errors">
      <press-daterangepicker class="field required error" name="daterangepicker" press-start-key="start_date" press-end-key="end_date" required press-validation-error="'daterangepicker' is required">
        <press-noscript>
          <input name="daterangepicker[start_date]" required type="date">
          <input name="daterangepicker[end_date]" required type="date">
          <div class="ui error input">
            'daterangepicker' is required
          </div>
        </press-noscript>
      </press-daterangepicker>
      <button type="submit">daterangepicker with errors</button>
    </form>
  </main>
</section>
<% include ../partials/footer %>
