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

  <main>
    <form method="POST">
      <h3>Code Under Test</h3>
      <press-daterangepicker
        class="press-daterangepicker-date_rangepicker_form-wrapper"
        name="date_rangepicker_form"
        press-start-key="start_date"
        press-end-key="end_date"
        press-input-id="press-input-id-for-testing-only"
        <%- valueObject(['date_rangepicker_form[start_date]', 'date_rangepicker_form[end_date]']) %>
        <%= flag('stay-duration') ? 'press-enable-stay-duration' : '' %>
      >

        <% if (flag('label')) { %>
          <template slot="label" slot-scope="slotProps">
            <label v-bind:for="slotProps.for">Start and End Dates</label>
          </template>
        <% } %>

        <press-noscript>
          <div class="two fields">
            <div class="column">
              <label for="date_rangepicker_form_start_date">Start date</label>
              <input id="date_rangepicker_form_start_date" name="date_rangepicker_form[start_date]" type="date" <%- value("date_rangepicker_form[start_date]") %>>
            </div>
            <div class="column">
              <label for="date_rangepicker_form_end_date">End date</label>
              <input id="date_rangepicker_form_end_date" name="date_rangepicker_form[end_date]" type="date" <%- value("date_rangepicker_form[end_date]") %>>
            </div>
          </div>
        </press-noscript>
      </press-daterangepicker>

      <input id="unrelated-input" v-model="unrelated_input" name="unrelated_input">
      <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">{{date_rangepicker_form.start}}</div></td>
          <td><div id="selected-value">{{date_rangepicker_form.end}}</div></td>
        </tr>
        <tr>
          <th><label for="external-input">Secondary Input</label></th>
          <td><input id="external-input-start" v-model="date_rangepicker_form.start_date"></td>
          <td><input id="external-input-end" v-model="date_rangepicker_form.end_date"></td>
        </tr>
      </table>
    </template>
    <div>
      <%- include ../partials/request.ejs %>
    </div>
  </main>
</section>
<% include ../partials/footer %>
