{{ block title }}
    {# Your chosen Ranking#}
{{ endblock }}

{{ block content }}

<style>
body {
  background-color: white;
  text-align: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}

.left {
  background-color: white;
  text-align: left;
  color: black;
  font-family: Arial, Helvetica, sans-serif;}

.green {
 background-color: #90ee90;
}

</style>


<style>
.underline {
  width: 100%;
  border-bottom: 1px solid 	#d3d3d3;
  margin-bottom: 20px;
    text-align: left;
  position: relative;
}
</style>

<style>

    table {
  width:80%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

th, td {
  padding: 10px;
  text-align: center;
}

#gray {
 background-color: #eee;
}

#green {
 background-color: #90ee90;
}
}



</style>



<div class="underline">
    <h3>Payment Information</h3>
</div>

<div >
    <h3>Randomly drawn pairs for the payment of your decision: {{tuples_own1}} and {{tuples_own2}}</h3>
</div>

<p class="left">Your ranking:</p>
  <table id="t02">
  <tr>
      {{ for r in Constants.ranknames}}
    <td>
        {{ r }}
</td>
{{ endfor }}
   <tr>
      <td>{{ r1 }}</td>
      <td>{{ r2 }}</td>
      <td>{{ r3 }}</td>
      <td>{{ r4 }}</td>
      <td>{{ r5 }}</td>
      <td>{{ r6 }}</td>
      <td>{{ r7}}</td>
      <td>{{ r8 }}</td>
      <td>{{ r9 }}</td>
      <td>{{ r10 }}</td>
      <td>{{ r11 }}</td>
      <td>{{ r12 }}</td>
      <td>{{ r13 }}</td>
      <td>{{ r14 }}</td>
      <td>{{ r15 }}</td>
      <td>{{ r16 }}</td>
  </tr>
</table>




<p id="test">You ranked pair {{ tuples_own_higher }} higher, therefore you receive {{ tuples_own_pay }} from your decision</p>

&nbsp
            <div >
                <h3>Randomly drawn pairs for the payment of your co-player's decision: {{tuples_other1}} and {{tuples_other2}}</h3>
            </div>

<p class="left">Your co-player's ranking:</p>
<table id="t03">
  <tr>
      {{ for r in Constants.ranknames}}
    <td>
        {{ r }}
</td>
{{ endfor }}
   <tr>
    <td>{{ or1 }}</td>
    <td>{{ or2 }}</td>
    <td>{{ or3 }}</td>
    <td>{{ or4 }}</td>
    <td>{{ or5 }}</td>
    <td>{{ or6 }}</td>
    <td>{{ or7}}</td>
    <td>{{ or8 }}</td>
    <td>{{ or9 }}</td>
    <td>{{ or10 }}</td>
    <td>{{ or11 }}</td>
    <td>{{ or12 }}</td>
    <td>{{ or13 }}</td>
    <td>{{ or14 }}</td>
    <td>{{ or15 }}</td>
    <td>{{ or16 }}</td>
  </tr>
</table>
<p>Your co-player ranked pair {{ tuples_other_higher }} higher, therefore you receive {{ tuples_other_pay }} from your co-player's decision</p>
<div >
    <h3>Your payment: {{ player.payoff }}</h3>
</div>


<p>
    {{ next_button }}
</p>

<script>
var el= document.getElementsByTagName("td");
el["{{ranks_own_higher}}"].classList.add("green")
el["{{ranks_own_higher16}}"].classList.add("green")
el["{{ranks_other_higher}}"].classList.add("green")
el["{{ranks_other_higher16}}"].classList.add("green")
</script>
{{ endblock }}