{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
{% endblock %}

{% block content %}
<div style="position:absolute; top:15%; bottom:30%; left:5%; right:45% ">
  <h3>Allocation Decision</h3>
  <h5>Capacity K=100</h5>
     <table class='table'>
       <tr>
         <th></th>
         <th>Retailer A</th>
         <th>Retailer B</th>
         <th>Total</th>
       </tr>

       <tr>
         {% for p in player_in_previous_rounds %}
         {% if p.round_number == x1 %}
             <th>Shortage in the Previous Period</th>
             <td> {{ p.shortage1 }}</td>
             <td> {{ p.shortage2 }}</td>
             <td>&nbsp;</td>
             {% endif %}
             {% endfor %}
       </tr>

       <tr>
            <th>order quantity</th>
            <td> {{ player.order1 }}</td>
            <td> {{ player.order2 }}</td>
            <td> {{ player.total }}</td>
       </tr>


         <tr>
             <th>Allocation</th>
             <td> {% formfield player.allocation1 label = ""%}</td>
             <td> {% formfield player.allocation2 label = ""%}</td>
             <td> {% next_button %}</td>
         </tr>
     </table>

</div>



<div style="position:absolute; top:15%; bottom:30%; left:60%; right:5%; overflow:auto">
    <h3>Round history</h3>
    <h5> &nbsp; </h5>

    <table class='table table-sm text-center'>
        <tr>
            <th rowspan="2"; class="align-middle">Round</th>
            <th colspan="3">Retailer A</th>
            <th colspan="3">Retailer B</th>
        </tr>

        <tr>
            <th>Order</th>
            <th>Allocation</th>
            <th>Shortage</th>
            <th>Order</th>
            <th>Allocation</th>
            <th>Shortage</th>
        </tr>

        {% for p in player_in_previous_rounds %}
        <tr>
            <td>{{ p.round_number }}</td>
            <td>{{ p.order1}}</td>
            <td>{{ p.allocation1 }}</td>
            <td>{{ p.shortage1 }}</td>
            <td>{{ p.order2 }}</td>
            <td>{{ p.allocation2 }}</td>
            <td>{{ p.shortage2 }}</td>
        </tr>
        {% endfor %}
    </table>
</div>

{% endblock %}