<% include ../partials/header %>
<section class="ui basic segment">
  <header>
    <h1>PRESS Test Site</h1>
    <h2>Autocomplete</h2>
  </header>

  <main class="ui">
    <form class="ui form" method="POST">
      <h3>Code Under Test</h3>
      <press-autocomplete name="autocomplete[input]" press-label-path="label" <%- value('autocomplete[input]') %>>
        <template slot="prefix-icon">
          <span>☃</span>
        </template>
        <press-noscript>
          <input name="autocomplete[input]" <%- value('autocomplete[input]') %> >
        </press-noscript>
        <template slot="postfix-icon">
          <span>☼</span>
        </template>
      </press-autocomplete>
      <button type="submit">Submit</button>
    </form>
    <template>
      <table>
        <caption>external accessors for writing assertions</caption>
        <tr>
          <th>Current Model Value</th>
          <td>
            <div id="selected-value">{{autocomplete.input}}</div>
          </td>
        </tr>
        <tr>
          <th><label for="external-input">Secondary Input</label></th>
          <td><input id="external-input" v-model="autocomplete.input"></td>
        </tr>
      </table>
    </template>
    <div class="ui column">
      <%- include ../partials/request.ejs %>
    </div>
  </main>
</section>
<% include ../partials/footer %>
