<html>
  <head>
    <title>Edit {{ thing.name }}</title>
  </head>
  <body>
    <form id="id_form" action="" method="POST">
      {% csrf_token %}
      {{ thing_form.as_p }}

      <div>
        <input type="submit" name="change" value="Change it" id="id_change">

        <button type="submit" name="clear" value="1">Clear all values</button>

        <button type="submit" name="check" value="1" id="id_check_button">Check it's all OK</button>

        <input type="submit" name="debounced" value="Press me!" id="id_debounced">

        <input type="submit" name="disappears" value="Press me as well!" id="id_disappears">
      </div>

      <div id="id_check_messages"></div>

      {# For an error condition #}
      <input type="text" style="display:none;" id="id_badinput1" value="Some value">
    </form>

    {# For an error condition #}
    <input type="text" style="display:none;" name="badinput2" id="id_badinput2" value="Some value">


    <script>
      var clickCount = 0;
      document.getElementById("id_check_button").onclick = function (event) {
          event.preventDefault();
          var emphasize = function (n) {
              if (n <= 0) {
                  return "";
              }
              return "really " + emphasize(n - 1);
          }
          event.preventDefault();
          document.getElementById("id_check_messages").innerHTML = "Everything is " + emphasize(clickCount) + "fine";
          clickCount++;
      };

      var pressMeClickCount = 0;
      document.getElementById("id_debounced").onclick = function (event) {
          event.preventDefault();
          pressMeClickCount++;
          document.getElementById("id_check_messages").innerHTML = "Pressed x " + pressMeClickCount.toString();
          document.getElementById("id_debounced").disabled = true;
          document.getElementById("id_debounced").cssClass = "aclass";
      };

      var pressMeTooClickCount = 0;
      document.getElementById("id_disappears").onclick = function (event) {
          event.preventDefault();
          pressMeTooClickCount++;
          document.getElementById("id_check_messages").innerHTML = "Pressed x " + pressMeTooClickCount.toString();
          document.getElementById("id_disappears").remove();
      };

    </script>

    {% if add_js_delay %}
      <script>
        document.getElementById('id_change').onclick = function (event) {
            event.preventDefault();
            window.setTimeout(function () {
                document.getElementById('id_form').submit();
            }, {{ add_js_delay }} * 1000);
        }

      </script>
    {% endif %}
  </body>
</html>
