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


{% block styles %}
<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;
}

.orange {
 background-color: #ff8800;
}

</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>
<link href="{% static 'instruction_tabs/custom.css' %}" rel="stylesheet">
{% endblock %}

{{ block content }}
  <!-- Tab navigation -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">


  <li class="nav-item" >
    <a class="nav-link active" id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 1
</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Tab 2</a>
  </li>


<li class="nav-item">
    <a class="nav-link" id="part3-tab" data-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Tab 3</a>
  </li>

</ul>
<br>
<br>


<!-- Tab content -->
<div class="tab-content" id="myTabContent">

  <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold"> Payment Information
 </h3>
  </div>
<br>


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

     <p>
        <b>
            Remember that the first value in each pair shows your payment in experimental currency units.
        </b>
    </p>

<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 }} better than pair {{ tuples_own_lower }}, therefore you receive {{ tuples_own_pay }} experimental currency units from your decision</p>

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

           <p>
        <b>
            Remember that the second value in each pair shows your payment in experimental currency units.
        </b>
    </p>

<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 }} better than pair {{ tuples_other_lower }}, therefore you receive {{ tuples_other_pay }} experimental currency units from your co-player's decision</p>
<div >
    <h4>Your total payoff from both players' decisions: {{ tuples_own_pay }} ECU +  {{ tuples_other_pay }} ECU = {{ total_pay }} ECU.</h4>
</div>
<div >
    <h4>This translates into a monetary payment of <b> {{ participant.payoff }}</b> .</h4>
</div>

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

{% endblock %}

{% block scripts %}
<script src="{% static 'instruction_tabs/prev_next_button.js' %}"></script>
<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")
el["{{ranks_own_lower}}"].classList.add("orange")
el["{{ranks_own_lower16}}"].classList.add("orange")
el["{{ranks_other_lower}}"].classList.add("orange")
el["{{ranks_other_lower16}}"].classList.add("orange")
</script>
{% endblock %}