{% extends "_base.html" %}

{% block main %}
  <section>
    <p>
      This form shows you how to implement CSRF with htmx, using <a href="https://dev.htmx.org/attributes/hx-headers/"> the <code>hx-headers</code> attribute</a>.
    </p>
  </section>
  <section>
    <p>
      View the source to see how it works!
    </p>
  </section>
  <section>
    <!--
      Add hx-headers to pass the CSRF token.

      This is normally best done on the <body>, to affect all requests, but
      this demo uses the <form> so all hx attributes are in one place.

      See:
      https://django-htmx.readthedocs.io/en/latest/tips.html#make-htmx-pass-the-csrf-token
    -->
    <form hx-post="/csrf-demo/checker/"
          hx-headers='{"x-csrftoken": "{{ csrf_token }}"}'
          hx-target="#result">
      <label for="id_number">
        Number:
      </label>
      <input id="id_number"
             name="number"
             type="text"
             placeholder="">
      <button type="submit">
        Check if odd
      </button>
    </form>
  </section>
  <section>
    <p id="result"><em>Awaiting interaction...</em></p>
  </section>
{% endblock main %}
