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



{% block title %}

{% endblock %}

{% block content %}
<style>
.otree-body{
padding-right: 15px;
padding-left: 15px;
max-width: 1200px;}
</style>
<style>
.otree-form-errors{
display: block;
border:none;
position: relative; top:70%
color: darkred;}
</style>

<div style="margin:0 auto">
    <div style="float:left; width: 60%">
      <h3> Period {{ player.round_number }} : Allocation Decision</h3> <br>
      <h4>Capacity K=100</h4>
         <table class='table'>
           <tr>
             <th></th>
             <th>Retailer A</th>
             <th>Retailer B</th>
             <th>Total</th>
           </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> <button class="otree-btn-next btn btn-primary next-button otree-next-button">Allocate</button> </td>
           </tr>
         </table>
    </div>

    <div style="float: right; width: 38%">
        <div style="width:100%;">
            <div style="width:100%">
                <h3> History</h3><br>
                <h4> &nbsp; </h4>

                <table class='table table-sm text-center'>
                    <colgroup>
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>

                    <tr>
                        <th rowspan="2"; class="align-middle">Period</th>
                        <th colspan="2">Retailer A</th>
                        <th colspan="2">Retailer B</th>
                    </tr>

                    <tr>
                        <th>Order</th>
                        <th>Allocation</th>
                        <th>Order</th>
                        <th>Allocation</th>
                    </tr>
                </table>
            </div>

            <div style="width:100%; height: 300px; overflow:auto">
                    {% for p in player_in_previous_rounds %}
                <table class='table table-sm text-center'>
                    <colgroup>
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                        <col width="20%">
                    </colgroup>
                    <tr>
                        <td>{{ p.round_number }}</td>
                        <td>{{ p.order1}}</td>
                        <td>{{ p.allocation1 }}</td>
                        <td>{{ p.order2 }}</td>
                        <td>{{ p.allocation2 }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
    <div style = "clear: both"></div>
</div>

<br>

<div style="margin:0 auto">
    <div style= "float: left; width:100%" >
        <br>
        <h3>
            Instructions
        </h3>
        <br>
        {% include Constants.instructions_template %}
    </div>
</div>

{% endblock %}