<html>
  <head>
    <title>Debug {{ expectation }}</title>
    <script language="javascript">
    var current = 0;
    var toggle_interval = null;

    var toggle = function() {
      current = (current + 1) % 2;
      var image = document.getElementById("screenshot");
      image.src = (current ? "{{ actual }}" : "{{ expected }}");
      var title = document.getElementById("text");
      title.textContent = (current ? "Actual" : "Expected");
    }

    var setup = function() {
      toggle();
      toggle_interval = window.setInterval(toggle, 1000);
    }

    var manualToggle = function() {
      if (toggle_interval != null)
        window.clearInterval(toggle_interval);
      toggle();
    }

    var confirmSubmit = function() {
      return confirm("The area in this diff will be ignored in all future comparisions. Are you sure?");
    }
    </script>
  </head>
  <body onload="setup();">
    <div>
      <a href="javascript:void(0)" onclick="manualToggle();">Toggle</a>
      &nbsp;&#8594;&nbsp;
      <span id="text"></span>
    </div>
    <br>
    <form action="/update_mask" method="post" onsubmit="return confirmSubmit();">
      <input type="hidden" name="test_run" value="{{ test_run }}"/>
      <input type="hidden" name="expectation" value="{{ expectation }}"/>
      <input type="submit" value="Ignore similar diffs in the future"/>
    </form>
    <br>
    <img id="screenshot" src=""/>
  </body>
</html>