{% extends 'form.html' %}

{% block extrahead %}
<script>
function hideunrelated(value){
  switch (value){
    case "":
      document.getElementById("amount-form").classList.add("w3-hide");
      document.getElementById("final-form").classList.add("w3-hide");
      document.getElementById("message-form").classList.add("w3-hide");
      break;
    case "capture":
    case "refund":
      document.getElementById("amount-form").classList.remove("w3-hide");
      document.getElementById("final-form").classList.remove("w3-hide");
      document.getElementById("message-form").classList.add("w3-hide");
      break;
    case "fail":
    case "success":
      document.getElementById("amount-form").classList.add("w3-hide");
      document.getElementById("final-form").classList.add("w3-hide");
      document.getElementById("message-form").classList.remove("w3-hide");
      break;
  }
}
</script>
{% endblock %}

{% block body_stuff %}onload="hideunrelated('')"{% endblock %}
{% block main %}
{{block.super}}
<details class="w3-content w3-left-align" open="open">
  <summary><h1>Payment object</h1></summary>
  {% for field, value in payment_fields %}
    <div class="w3-row w3-margin w3-grey">
      <div class="w3-col s2">
        {{field}}
      </div>
      <div class="w3-col s10">
        {{value}}
      </div>
    </div>
  {% endfor %}
</details>
{% endblock %}
