{% extends "_base.html" %}

{% block main %}
  <section>
    <!--
      This form itself is never submitted, but acts as a container for the form
      control elements, which make their own individual requests. Since the
      form controls all have the same CSRF header, target, and swap method, we
      define those attributes here and the controls inherit them.
    -->
    <form action="#"
          hx-headers='{"x-csrftoken": "{{ csrf_token }}"}'
          hx-target="#attribute-test"
          hx-swap="outerHTML">
      <p>
        The below form controls implement different patterns with HTMX.
        Interact with them to trigger requests that will render a table showing the Django request attributes added and changed by <code>HtmxMiddleware</code>.
      </p>
      <p>
        <button id="basic-button"
                hx-put="/middleware-tester/table/">
          Basic button
        </button>
      </p>
      <p>
        <button id="prompt-button"
                hx-delete="/middleware-tester/table/"
                hx-prompt="What is your answer?">
          Prompt button
        </button>
      </p>
      <p>
        <input id="keyup-input"
               name="keyup_input"
               type="text"
               placeholder="Type something..."
               autocomplete="off"
               hx-post="/middleware-tester/table/"
               hx-trigger="keyup changed delay:100ms"></input>
      </p>
    </form>
  </section>
  <hr>
  <section>
    <p id="attribute-test"><em>Awaiting interaction...</em></p>
  </section>
{% endblock main %}
